Nutzen Sie VueJS-Komponenten in PHP

Question

Ich möchte grundlegendes HTML, das von PHP- und VueJS-Komponenten generiert wurde, mischen, ohne VueJS bis zum untersten Dom-Blatt verwenden zu müssen. Auf das übergeordnete Layout ist eine Vue-Anwendung angewendet, alle Kopfzeilen, Navigation, Seitenleisten usw. sind Vue-Komponenten und der Hauptinhalt auf den meisten Seiten ist immer noch reines, von PHP generiertes HTML. Ich möchte einen kleinen Teil meines Hauptinhalts mit Vue-Komponenten aktualisieren, kann sie aber nicht verwenden, sobald ich HTML verwende: Phpscriptgeneratestheentiredom

P粉883973481 · Answer

如果您将来自 API 或任何其他来源的模板动态传递到您的 Vue 实例中。有一种方法可以通过 v-html 属性访问该属性，但在使用之前请查看下面的注释。

请注意，内容以纯 HTML 形式插入 - 它们不会被编译为 Vue 模板。

因此，当您尝试绑定/渲染组件本身时，它不是纯 HTML。所以它不会被Vue的模板编译器处理。

可能的解决方案是您可以从 PHP API 获取组件名称和属性，而不是整个 HTML 模板。

您也可以通过使用 Vue 编译选项来实现相同的目的。这是演示：

Vue.component('Cats', {
  props: ['msg'],
  template: '{{ msg }}'
});

// Template coming from PHP
const template = ``

var app = new Vue({
  el: '#app',
  data: {
    compiled: null
  },
  mounted() {
    setTimeout(() => {
        this.compiled = Vue.compile(template);
    })
  }
});

P粉494151941 · Answer

最后，我必须手动将 JS 文件添加到包含全局 window.ExtraVue 的构建配置中，其设置函数如下所示：

import Cats from 'files/Cats.vue';
window.ExtraVue = {
    setup: function(data) {
        new Vue({
            el: '#extra-vue',
            data: data,
            components: {
                Cats
            },
            template: ''
        })
    }

};

然后在 PHP 脚本的最后调用设置函数。

setup 函数现在可以为每个需要独立的组件创建一个新的 Vue 实例。

理想情况下，如果 VueJS 能够用组件替换匹配的标签，那就太好了。