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

新手上路,请多包涵

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

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

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

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

阅读 479
2 个回答

您需要使用 作用域插槽。你快到了,我刚刚添加了创建范围的模板。

   <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 许可协议

我在 <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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题