使用插槽时，Vue如何将数据返回给父组件

Question

使用插槽时，Vue如何将数据返回给父组件

3

我有一个关于自定义组件的输入，当我在包装组件上点击下一步按钮时，我需要向父组件发出详细信息。

这在Vue中如何实现？

wrapper.vue

<template>
    <div :id="contentId" class="mt-3">    
    <div>        
        <slot></slot>        
    </div>
    <b-row class="float-right">                
                <b-col>
                    <button cssClass="e-outline" v-on:click="btnNext">{{nextButtonText}}</button>  
                </b-col> 
            </b-row>     
    </div>

    </template>

parent.vue

<template>
    <div>
        <Wrapper contentId="1">
            <CustomComponent1 />
        </wrapper>
        <Wrapper contentId="2">
            <CustomComponent1 />
        </wrapper>
    </div>
    </template>

customComponent1.vue

<template>
    <div>
        <input v-model="name" />
<input v-model="name2" />
    </div>
</template>

上面的代码仅供示例参考。

- JimmyShoe

您是否正在尝试让_wrapper_发出_CustomComponent_中的数据？ - Daniel

是的，那就是我想要的。把按钮移到插槽里会更好吗？ - JimmyShoe

您需要使数据可供包装器访问。您可以使用$emit和slot-scope来实现。 - Daniel

好的，谢谢。您能否提供一个示例，说明如何将其应用于我的示例中？我已经阅读了有关插槽作用域的文档，但对于新手来说并不容易理解。 - JimmyShoe

这是一个非常令人困惑的概念，在我看来。我正在撰写一篇答案，但你可以在这里查看一个工作示例https://codesandbox.io/s/0pzjm7vo5n。 - Daniel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel · Accepted Answer

问题在于包装器本身没有访问作用域组件数据的能力，因此这些链接必须手动创建。无法确定组件可能具有多少子元素或插槽，因此此类功能不是Vue的一部分。

例如，在父组件App中有一个包含MyInput组件的Wrapper的示例...

MyInput

MyInput组件不会自动更新其他组件，因此需要设置为通过$emit内部数据。

可以使用watch、@change监听器输入或其他方法来完成此操作。您可以随着它们的变化发出多个数据，也可以使用单个有效负载与所有数据。

this.$emit("input", myData);

应用程序

应用程序需要明确连接MyInput和Wrapper之间的数据。

<Wrapper> <MyInput @input="onInput" slot-scope="{ onInput }" /> </Wrapper>

这里的魔法/技巧在于我们使用slot-scope将输入框的input发射函数绑定到onInput函数。

包装器

然后，包装器需要监听从Wrapper通过App传递的事件。

<slot :onInput="onInput" />

onInput 是一种处理数据的方法。

以下是示例

我建议阅读以下内容

https://github.com/vuejs/vue/issues/4332 (特别是Evan的回答为什么不可能)
https://adamwathan.me/renderless-components-in-vuejs/ Adam有一种详细记录的使用渲染函数和插槽来抽象功能从UI中分离出来的方法。虽然它与本文不直接相关，但值得一读，可能会提供更多关于使用slot-scope的信息以及改进UI组件结构的思路。