Vuejs 使用插槽在 parent child 组件之间传递数据

Question

我可以像这样创建一个 parent child 组件：

Child 组件

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

Parent 组件

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

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" 正确传递给 child 并按预期显示。

但是，我需要做的如下（基本上我已经将 my-child 从 parent 模板中拉出并放回 HTML。我会我可以在 my-parent 中使用许多不同的 my-child 组件）：

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

我更改了 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 绑定实际上在根实例上查找 'value' 而不是从 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。

Vuejs 使用插槽在 parent child 组件之间传递数据

Vuejs passing data between parent child components using slots

vue.js

vuejs2