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

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/

但这是开销,不是吗？

例如,在角度我们可以这样做:http://jsfiddle.net/ADukg/9609/ 它更简单.

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

Answer 1

您可以使用作用域槽来近似您的 Angular 示例。子级slot在其模板中定义 a ，并且作为标签的属性slot，它定义了父级可用的数据。父级传递一个模板作为槽填充器。模板可以通过属性引用子级定义的数据scope。

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>