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

【问题标题】：How to pass props using slots from parent to child -vuejs如何使用插槽将道具从父级传递给子级-vuejs
【发布时间】：2017-12-24 02:36:29
【问题描述】：

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

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

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

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

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案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>

【讨论】：

大声笑，就在昨天，Vue 2.6 添加了new slot syntax，这是他们将在 v3 中支持的内容。所以在这种情况下：v-slot="{ signal }"。虽然slot-scope 仍然受支持。
@thanksd 如果我没看错，新语法是用于命名插槽，而不是范围插槽？
@thanksd 好的，我明白了。今晚晚些时候我会更新答案，或者如果你愿意，你可以继续。 medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e
有什么办法可以做到这一点，而不必在“app”文件中编写v-slot和:signal，而是直接将其集成到my-parent和my-child的模板中我只需要在我的应用程序的父级上添加signal 属性，我的孩子就可以自动访问它。
@mesqueeb 对于这种用法，最好的选择似乎是使用依赖注入，请参阅vuejs.org/v2/guide/…

【解决方案2】：

你可以试试这个技巧。

在这个例子中。假设一个父组件想要与值 bar 共享 prop foo。

父组件

<template>
    <div class="parent">
        <slot :foo="bar" />
    </div>
</template>

子组件

<parent>
    <template v-slot:default="slotProps">
        // You can access props as object slotObjects {foo"bar"}
        <p>{{slotProps.foo}}</p>
    </template>
<parent>

从this video得到这个想法

希望它能帮助你完成任务。

【讨论】：