如何使用插槽将道具从父级传递给子级 -vuejs [英] How to pass props using slots from parent to child -vuejs

问题描述

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

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

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

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

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

const MyParent = Vue.component('my-parent', {模板:`
<h3>父母的孩子:</h3><slot :signal="parentVal"></slot></div>`,数据:函数(){返回 {parentVal: '父母的价值'}}});const MyChild = Vue.component('my-child', {模板:'<h3>显示子{{信号}}</h3>'，道具:['信号']});新的 Vue({el: '#app',成分: {我的父母，我的孩子}})

<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="应用程序"><我的父母><我的孩子></我的孩子><我的孩子></我的孩子></我的父母>

解决方案

您需要使用 作用域插槽.您就快到了，我刚刚添加了创建作用域的模板.

 <template slot-scope="{signal}"><my-child :signal="signal"></my-child><my-child :signal="signal"></my-child></模板></我的父母>

您的代码已更新.

const MyParent = Vue.component('my-parent', {模板:`
<h3>父母的孩子:</h3><slot :signal="parentVal"></slot></div>`,数据:函数(){返回 {parentVal: '父母的价值'}}});const MyChild = Vue.component('my-child', {模板:'<h3>显示子{{信号}}</h3>'，道具:['信号']});新的 Vue({el: '#app',成分: {我的父母，我的孩子}})

<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="应用程序"><我的父母><template slot-scope="{signal}"><my-child :signal="signal"></my-child><my-child :signal="signal"></my-child></模板></我的父母>

<小时>

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

 <template v-slot="{信号}"><my-child :signal="signal"></my-child><my-child :signal="signal"></my-child></模板></我的父母>

I have a parent component and a child component.

The parent component's template uses a slot so that one or more child components can be contained inside the parent.

The child component contains a prop called 'signal'.

I would like to be able to change data called 'parentVal' in the parent component so that the children's signal prop is updated with the parent's value.

This seems like it should be something simple, but I cannot figure out how to do this using slots: Here is a running example below:

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>

解决方案

You need to use a scoped slot. You were almost there, I just added the template that creates the scope.

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

Here is your code updated.

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>

---

The release of Vue 2.6 introduces a unified v-slot directive which can be used for normal or scoped slots. In this case, since you're using the default, unnamed slot, the signal property can be accessed via v-slot="{ signal }":

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

这篇关于如何使用插槽将道具从父级传递给子级 -vuejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！