Vuejs使用插槽在父子组件之间传递数据

Question

我可以创建如下所示的父级子组件：

子组件

Vue.component('my-child', {
    template: '<div>{{value}}</div>',
    props: {
        value: {
            type: String,
            default: ""
        }
    }
});

父组件

注意如何在父模板中引用my-子组件。

Vue.component('my-parent', {
    template: '<div><span>Hello</span><my-child :value="value"></my-child></div>',
    data: function () {
        return {
            value: ""
        }
    },    
});

然后我就可以这样用了：

<my-parent :value="ABC"></my-parent>

"ABC“值将正确传递给子节点并按预期显示。

但是，我需要做的是如下所示(基本上，我已经从父模板中提取了我的子模板，并返回到HTML中。我将有许多不同的子类组件，这些组件可以在我的父级内部使用)：

<my-parent :value="ABC">
    <my-child></my-child>
</my-parent>

我将父组件更改为使用如下所示的插槽：

Vue.component('my-parent', {
    template: '<div><span>Hello</span><slot :value="value"></slot></div>',
    data: function () {
        return {
            value: ""
        }
    },    
});

my-子模板将被拾取并显示，但是ABC值并没有像我所期望的那样传递到my-子组件。

如果我这么做：

<my-parent :value="ABC">
    <my-child :value="value"></my-child>
</my-parent>

my-子绑定实际上是在根实例上查找'value‘，而不是从我的父实例中查找’value‘，这不是我想要的。

我如何通过插槽传递数据？

Answer 1

要将数据从组件传递到其插槽中的内容，需要使用作用域槽。

在父组件模板中，将要传递给子组件的属性添加到插槽中：

<div><span>Hello</span><slot :value="value"></slot></div>

然后，在使用父元素的模板中，使用带有template属性的scope标记。

<my-parent :value="ABC">
  <template scope="props">
    <my-child :value="props.value"></my-child>
  </template>
</my-parent>

这是一个工作的小提琴。