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

Question

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

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

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

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

这看起来应该很简单，但我无法弄清楚如何使用插槽来做到这一点：下面是一个运行示例：

 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>

原文由 Kunle 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 指令，可用于普通或作用域插槽。在这种情况下，由于您使用的是默认的未命名插槽，因此可以通过 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>

原文由 Bert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在 <v-data-table></v-data-table>

 <template
  v-for="slot in slots"
  v-slot:[`item.${slot}`]="{ item }"
>
  <slot
    :name="slot"
    :item="item"
  />
</template>

我添加了一个名为插槽的道具。当我调用组件时，我发送一个插槽，例如：

 <my-custom-table-component :slots="['name']">

 <template v-slot:name="{ item }">
  {{ item.first_name + item.last_name}}
 </template>

</my-custom-table-component>

原文由 Filipe Cruz 发布，翻译遵循 CC BY-SA 4.0 许可协议