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

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

＆＃13;

var myAwesomeComponent = {
  template: '<div><slot myAwesomeData="Directive Message"></slot></div>'
};

new Vue({
  el: '#app',
  components: {
    test: myAwesomeComponent
  }
});

＆＃13;

<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>

＆＃13;

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

1 个答案: