如何使用插槽从父级到子级-vuejs传递道具

Question

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

父组件的模板使用一个槽,以便父组件中可以包含一个或多个子组件.

子组件包含一个称为"信号"的道具.

我希望能够在父组件中更改名为"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

您需要使用范围内的插槽.你几乎就在那里,我刚刚添加了创建范围的模板.

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

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

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