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

但是，我需要做的是如下（基本上我把我的孩子从父模板中拉出来然后再回到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-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>

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

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

这是一个有效的fiddle。

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

1 个答案: