Javascript 如何从插槽访问组件数据？

它不起作用：

var myAwesomeComponent=Vue.component({
模板：“”，
数据：函数（）{
返回{
myAwesomeData:“消息”
}
}
});
新Vue({
el:“#应用程序”，
模板：“{myAwesomeData}}”，
组成部分：{
myAwesomeComponent:myAwesomeComponent
}
});

之所以发生这种情况，是因为myAwesomeData未在父组件中定义，并且我们无法将组件的变量用于

与此相反，我们需要创建自己的组件并将其传递到我的awesome组件中，如下所示：

但是它是在头顶上，不是吗

例如，在angular中，我们可以这样做： 这要简单得多

我们可以在Vue中执行类似操作？

您可以使用它来近似您的角度示例。子项在其模板中定义了一个

插槽

，并且作为

插槽

标记的属性，它定义了父项可用的数据。父级传递一个模板作为插槽填充。模板可以通过

scope

属性引用子级定义的数据

var myAwesomeComponent={
模板：“”
};
新Vue({
el:“#应用程序”，
组成部分：{
测试：Myawesome组件
}
});

{{props.myAwesomeData}
很抱歉链接，网站限制。不，我刚刚发布了一篇编辑文章。你可以用正确的方式给我看这个例子吗？为什么
myAwesomeData
在孩子身上？您是否需要
myAwesomeData
来处理通过插槽传入的数据？您可以在模板中执行
{{myAwesomeData}
。如果您确实需要插槽中的
myAwesomeData
，那么它很可能不应该在子插槽中。
var myAwesomeComponent = Vue.component({
    template: '<div><slot></slot></div>',
  data: function () {
    return {
        myAwesomeData: 'Message'
    }
  }
});

new Vue({
    el: '#app',
  template: '<my-awesome-component>{{ myAwesomeData }}</my-awesome-component>',
  components: {
    myAwesomeComponent: myAwesomeComponent
  }
});