Vue.js - コンポーネント内部コンポーネント

Question

グリッドと呼ばれるコンポーネントがあります。このコンポーネントの中で、私はサーバーからJSONデータを読み込み、それらをレンダリングします。それらはほとんどが文字列と整数です。時にはJSONには<strong>myvalue</stong>のようなHTMLが含まれているので、データを3つの角括弧{{{と}}}でレンダリングします。

HTMLは純粋なHTMLではなく、<my-component my-param="1"></my-component>のようなコンポーネントです。 Vue.jsにこの共用者を表示する方法を教えてください。私が得るのは、純粋にグリッドに印刷されたHTMLだけです。

おかげで、それは、コンポーネントの場合は、その中に何があるか表示されません（{{{}}}と同等です）v-htmlを使用して

Answer 1

リモートからロードしたコードをもう一度コンパイルする必要があります。

ps：私はDOMを操作するためにjQueryを使用します。

このコンポーネントでは、サーバーからJSONデータを読み込み、それらをレンダリングします。

"loadAndRenderFromServer（）"という名前の関数があると仮定します。以下のコードを適合させてください。

例：あなたのグリッドは、マークアップ<div id='grid'>

// vuecomponent.js 
export default { 
    [...] 

    methods: { 
     loadAndRenderFromServer() { 
      // first, load remote content and insert into #grid 

      // now, compile 
      this.$compile($("#grid").get(0)); 
     } 
    }, 

    [...] 
} 

を持っている場合あなたは、あなたのコンポーネントがロードされたコンテンツを複製するために開始した場合、「コンパイル」を使用する必要があるかもしれません。 のVueJSドキュメントをチェックして、とのコンパイルメソッドをコンパイルしてください。

Answer 2

。

代わりに親テンプレートに<slot>を使用してみます。

動的コンポーネントを使用する場合は、<component>を使用する必要があります。動的コンポーネント内にコンテンツを追加する場合は、<slot>を使用する必要があります。

私はあなたが

<component :is="myComponent" /> 

のように、これらのコンポーネントのモデルは、任意のコンテンツを挿入するために、いくつかの<slot> Sを入れて内部のものを使用することをお勧めします。