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

Question

它不工作:https://jsfiddle.net/2ouxsuLh/

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

这是因为 myAwesomeData 没有在父组件中定义，我们不能将组件的变量与 .

取而代之的是，我们需要创建自己的组件并将其传递到 my-awesome-component 中，如下所示:https://jsfiddle.net/simplesmiler/5p420nbe/

但这是开销，不是吗？

例如，在 Angular 我们可以这样做:http://jsfiddle.net/ADukg/9609/它要简单得多。

我们可以在 Vue 中做这样的事情吗？

Answer 1

您可以使用 scoped slots近似你的 Angular 示例。子级在其模板中定义了一个 slot，作为 slot 标记的属性，它定义了父级可用的数据。父级传递一个模板作为插槽填充器。模板可以通过scope属性引用child定义的数据。

var myAwesomeComponent = {
  template: '<div><slot myAwesomeData="Directive Message"></slot></div>'
};

new Vue({
  el: '#app',
  components: {
    test: myAwesomeComponent
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
  <test>
    <template scope="props">
      {{ props.myAwesomeData }}
    </template>
  </test>
</div>