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 des Hauptinhalts mit Vue-Komponenten aktualisieren, kann sie aber nicht verwenden, sobald ich HTML verwende:

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.

Funktioniert im oberen DOM einwandfrei, aber nach dem Rendern einiger grundlegender HTML-Elemente füllt die App die Komponenten unten nicht mehr aus.

Php kann JS in Skript-Tags rendern, aber keine Importe verwenden.

Gibt es eine Möglichkeit, eine Vue-Instanz dazu zu bringen, alle 标签视为 Cats Tags als Cats-Komponenten zu behandeln, unabhängig davon, wo auf der Seite sie geschrieben sind?

Was ich bisher versucht habe:

• Asynchrone Komponenten.
• Verwenden Sie das Portal, das das Portal installiert.
• Erstellen Sie eine weitere Vue-Instanz und mounten Sie sie auf einer anderen ID.

Irgendwelche Ideen?

EDIT: Ich habe bereits Dinge ausprobiert, die möglicherweise durch das Durcheinander mehrerer Versuche zur Modernisierung der Benutzeroberfläche in diesem Giganten, den ich geerbt habe, zunichte gemacht wurden. Daher würde ich diese Möglichkeiten für andere, die sich in dieser Situation befinden, nicht ausschließen.

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);
    })
  }
});

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 脚本的最后调用设置函数。

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

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