更新（28-10-18）

Question

我试图找到将属性传递给子组件的“最干净”的方法。

我有一个自定义组件（在此示例中，将其称为parent）可以通过slot接收任何子组件。想象一下，父组件想要更新子代的某些属性x。

我想出的解决方案使用作用域插槽，例如：

// parent.vue

<template>
    … some template stuff
    <slot :x="parentX"></slot>
</template>

<script>
    ...component setup

    computed: {
        parentX: function() {
            return ...some number
        }
    },

    ...more component stuff
</script>

-

// child.vue

<template>
    ...some html that uses property x
</template>

<script>
    ...component setup

    props: { x: Number },

    ...more component stuff
</script>

-

// app.vue

<template>
    <parent>
        <template scope="A">
            <child :x="A.x" />
        </template>
    </parent>
</template>

这有效，但是由于以下几个原因，效果不是很好：

将组件连接在一起所需的额外标记。
这些组件的用户需要了解不需要了解的属性。父组件正在向其子组件发送内部状态位。我必须手动将其连接起来的事实有点烦人，尤其是因为它只是样板。

有没有更好的方法可以做到这一点，所以我可以说：

<template>
    <parent>
        <child />
    </parent>
</template>

那么我只需要知道孩子有一个财产x。

更新（28-10-18）

可以直接在子元素上使用slot-scope来删除一些样板。例如

<template>
    <parent>
        <child slot-scope="child" :x="child.x" />
    </parent>
</template>

，但实际问题仍然存在。我需要手动连接app.vue中的组件，即使在父组件和子组件中已经对此进行了完全定义。

Answer 1

插槽用于未耦合的内容。您的要求是内容必须是一个道具。在我看来，您想要做的就是将子组件作为道具传递给父组件，并让父模板执行类似的操作

<div :is="childComponent" :x="child.x"></div>

将属性传递到插槽

更新（28-10-18）

1 个答案: