Javascript VueJS-如何从道具计算花括号语法

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

我怎样才能做到这一点呢？是否需要调用一个函数来计算花括号语法

这是我的密码

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

我期待的是

My message: Hello John

---

jsiddle:

如果数据是子组件的一部分，则可以使用

newvue({
el:“#应用程序”，
组成部分：{
“我的组件”：{
数据：函数（）{
返回{
名字：“约翰”，
姓：“史密斯”
}
},
模板：`
我的信息：
`
}
}
});

模板呢

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

你好{{firstname}}

---

您的已更新。

@AdrianGunawan您确定要将数据作为组件的一部分吗？通常情况下，您会将数据传递到组件中。是的，我希望数据成为组件的一部分，因为我希望它在组件中隔离，而不是在全局Vue应用程序中隔离。@AdrianGunawan已更新。非常感谢，这很有效！你的解决方案让我在与孩子沟通时有了不同的想法。

My message: Hello John

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>