javascript - VueJS - 如何从 prop 评估花括号语法

Question

我正在尝试创建一个组件，该组件接受一个属性，该属性包含花括号语法，稍后将在组件内插入。

我怎样才能实现这样的目标？是否需要调用一个函数来评估花括号语法？

这是我的代码

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

这是我的组件

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

我得到的结果

My message: Hello {{ firstname }}

我期待的是

My message: Hello John

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 .