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

Question

我可以像这样创建父子组件：

子组件

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

父组件

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

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”被正确传递给孩子并按预期显示。

但是，我需要做的是如下（基本上我已经将 my-child 拉出父模板并返回到 HTML。我将拥有许多不同的 my-child 组件，我可以在我的父母内部使用）：

<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-child 模板正在被拾取并显示，但 ABC 值没有像我预期的那样传递到 my-child 组件。

如果我这样做：

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

my-child 绑定实际上是在根实例而不是从 my-parent 中查找“值”，这不是我想要的。

如何通过插槽向下传递数据？

Answer 1

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

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

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

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

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

这是一个有效的fiddle。