VueJS - Wie geschweifte Klammern Syntax von einem Prop zu bewerten

Question

Ich versuche, eine Komponente zu erstellen, die eine Eigenschaft akzeptiert, die geschweifte Klammern-Syntax enthält, die später in der Komponente interpoliert werden soll.

Wie kann ich so etwas erreichen? Gibt es eine Funktion, die ich aufrufen muss, um die Syntax der geschweiften Klammern zu bewerten?

Hier ist mein Code

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

Und das ist meine Komponente

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

Das Ergebnis I

My message: Hello {{ firstname }} 

bekam Was ich erwarte ist

My message: Hello John 

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

Answer 1

In dem Fall, dass der Datenteil des Kindes Komponente ist, können Sie eine scoped slot verwenden können.

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

Und die Vorlage

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

Ihre fiddle aktualisiert.