在 PHP 中利用 VueJS 组件

Question

我想混合由 Php 和 VueJS 组件生成的基本 HTML，而不必一直使用 VueJS 到最低的 dom 叶子。

父布局应用了 Vue 应用程序，所有标头、导航、旁注等都是 Vue 组件，大多数页面上的主要内容仍然是由 PHP 生成的纯 HTML。

我想用Vue组件升级一小部分主要内容，但是一旦使用了HTML就无法使用它们：

Php script generates the entire dom
<div id="app"> VueJS instance mounts here.
    <Cats>This component works perfectly here.
    <div id="main Content">More HTML content generated by PHP.
        <Cats> Cats does nothing here.

在上部 DOM 中工作得很好，但在渲染一些基本 HTML 后，应用程序将不再填充下面的组件。

Php 可以在脚本标签中渲染 JS，但无法使用任何导入。

有没有办法让 Vue 实例将所有 标签视为 Cats 组件，无论它写在页面的哪个位置？

到目前为止我已经尝试过：

• 异步组件。
• 使用安装门户的门户。
• 创建另一个 Vue 实例并将其挂载到另一个 ID。

有什么想法吗？

编辑：我之前尝试过的事情可能会被我继承的这个庞然大物中的多次 UI 现代化尝试的混杂所阻碍。 因此，我不会为面临这种情况的其他人排除这些可能性。

Answer 1

如果您将来自 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);
    })
  }
});

sssccc

  
  
  

Answer 2

最后，我必须手动将 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 脚本的最后调用设置函数。

sssccc

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

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