在 PHP 中利用 VueJS 组件
P粉611456309
P粉611456309 2023-11-11 00:01:44
0
2
725

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

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

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

Php script generates the entire dom 
VueJS instance mounts here. This component works perfectly here.
More HTML content generated by PHP. Cats does nothing here.

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

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

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

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

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

有什么想法吗?

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

P粉611456309
P粉611456309

全部回复 (2)
P粉883973481

如果您将来自 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
             
    P粉494151941

    最后,我必须手动将 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 能够用组件替换匹配的标签,那就太好了。

      最新下载
      更多>
      网站特效
      网站源码
      网站素材
      前端模板
      关于我们 免责声明 Sitemap
      PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!