VueJS - 小道具から中括弧構文を評価する方法

Question

中括弧構文を含むプロパティを受け入れ、後でコンポーネント内で補間するコンポーネントを作成しようとしています。

どうすればこのようなことができますか？中括弧構文を評価するために呼び出す必要がある関数はありますか？ここで

私のコード

<my-component template="Hello {{ firstname }}"></my-component> 

であり、これは私が期待してい何

My message: Hello {{ firstname }} 

を得た結果は

My message: Hello John 

である私のコンポーネント

props: { 
    template: null 
}, 
data: function() { 
    return { 
     firstname: 'John', 
     lastname: 'Smith' 
    } 
}, 
template: `<div> 
    My message: <span>{{ template }}</span> 
    </div> 
` 

です

JsFiddle：https://jsfiddle.net/xg3464b4/

Answer 1

データが子コンポーネントの一部である場合は、scoped slotを使用できます。

new Vue({ 
    el: '#app', 
    components: { 
     'my-component': { 
      data: function() { 
       return { 
        firstname: 'John', 
        lastname: 'Smith' 
       } 
      }, 
      template: ` 
       <div> 
        My message: <span><slot :firstname="firstname"></slot></span> 
       </div> 
      ` 
     } 
    } 
}); 

テンプレート

<div id="app"> 
    <my-component> 
    <template scope="{firstname}"> 
     Hello {{firstname}} 
    </template> 
    </my-component> 
</div> 

あなたfiddleを更新しました。