在 PHP 中利用 VueJS 元件

Question

我想混合由Php和VueJS元件產生的基本HTML，而不必一直使用VueJS到最低的dom葉子。父佈局應用了Vue應用程序，所有標頭、導航、旁注等都是Vue元件，大多數頁面上的主要內容仍然是由PHP產生的純HTML。我想用Vue組件升級一小部分主要內容，但是一旦使用了HTML就無法使用它們：Phpscriptgeneratestheentiredom

P粉883973481 · Answer

如果您將來自 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 · Answer

最後，我必須手動將 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 能夠用元件取代相符的標籤，那就太好了。