在 PHP 中利用 VueJS 元件

Question

我想混合 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 元件，無論它寫在頁面的哪個位置？

到目前為止我已經嘗試過：

• 非同步組件。
• 使用安裝入口網站的入口網站。
• 建立另一個 Vue 實例並將其掛載到另一個 ID。

有什麼想法嗎？

編輯：我之前嘗試過的事情可能會被我繼承的這個龐然大物中的多次 UI 現代化嘗試的混雜所阻礙。 因此，我不會為面臨這種情況的其他人排除這些可能性。

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

sssccc

  
  
  

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 腳本的最後呼叫設定函數。

sssccc

setup 函數現在可以為每個需要獨立的元件建立一個新的 Vue 實例。

理想情況下，如果 VueJS 能夠用元件取代相符的標籤，那就太好了。