vue.js - 如何使用插槽将 Prop 从 parent 传递给 child -vuejs

Question

我有一个父组件和一个子组件。

父组件的模板使用插槽，以便一个或多个子组件可以包含在父组件中。

子组件包含一个名为“信号”的 Prop 。

我希望能够更改父组件中名为“parentVal”的数据，以便使用父级的值更新子级的信号 Prop 。

这看起来应该很简单，但我不知道如何使用插槽来做到这一点:下面是一个运行示例:

const MyParent = Vue.component('my-parent', {
  template: `<div>
               <h3>Parent's Children:</h3>
               <slot :signal="parentVal"></slot>
             </div>`,

  data: function() {
    return {
      parentVal: 'value of parent'
    }
  }
});

const MyChild = Vue.component('my-child', {
  template: '<h3>Showing child {{signal}}</h3>',
  props: ['signal']
});

new Vue({
  el: '#app',
  components: {
    MyParent,
    MyChild
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-parent>
    <my-child></my-child>
    <my-child></my-child>
  </my-parent>
</div>

Answer 1

您需要使用 scoped slot .您快完成了，我只是添加了创建范围的模板。

  <my-parent>
    <template slot-scope="{signal}">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>

这是您的代码更新。

const MyParent = Vue.component('my-parent', {
  template: `<div>
               <h3>Parent's Children:</h3>
               <slot :signal="parentVal"></slot>
             </div>`,

  data: function() {
    return {
      parentVal: 'value of parent'
    }
  }
});


const MyChild = Vue.component('my-child', {
  template: '<h3>Showing child {{signal}}</h3>',
  props: ['signal']
});

new Vue({
  el: '#app',
  components: {
    MyParent,
    MyChild
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-parent>
    <template slot-scope="{signal}">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>
</div>

---

release of Vue 2.6引入了一个统一的 v-slot 指令，可用于普通或作用域插槽。在这种情况下，由于您使用的是默认的未命名插槽，因此可以通过 v-slot="{ signal }" 访问 signal 属性:

  <my-parent>
    <template v-slot="{ signal }">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>