搜索

首页  >  问答  >  正文

在 PHP 中利用 VueJS 组件

我想混合由 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粉611456309P粉611456309386 天前908

全部回复(2)我来回复

  • P粉883973481

    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
    

    回复
    0
  • P粉494151941

    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 能够用组件替换匹配的标签,那就太好了。

    回复
    0
  • 取消回复