我想混合由 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
组件,无论它写在页面的哪个位置?
到目前为止我已经尝试过:
有什么想法吗?
编辑:我之前尝试过的事情可能会被我继承的这个庞然大物中的多次 UI 现代化尝试的混杂所阻碍。 因此,我不会为面临这种情况的其他人排除这些可能性。
P粉8839734812023-11-11 17:48:32
如果您将来自 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粉4941519412023-11-11 11:18:58
最后,我必须手动将 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 能够用组件替换匹配的标签,那就太好了。