vue 使用插槽时将数据发送回父级

Question

我有自定义组件的输入，当我单击包装器组件上的下一个按钮时，我需要向父组件发送详细信息。

这在 vue 中怎么可能？

包装器.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>

父.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>

上面的代码是为了说明目的。

Answer 1

问题是包装器天生就不能访问作用域组件的数据，因此必须手动创建这些链接。没有办法知道组件可能有多少个孩子或插槽，所以这种功能不是 vue 魔法的一部分。

因此，在您有父App组件的示例中，它包含一个在插槽Wrapper中具有MyInput组件的组件...

我的输入

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

这可以使用watch,@change侦听器作为输入或其他方式来完成。您可以在数据更改时发出多个数据，或者对所有数据使用单个有效负载

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

应用程序

在App明确需要连接数据之间MyInout和Wrapper

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

魔术/技巧发生在这里，我们使用 slot-scopeinput将输入的发射函数绑定到onInput函数。

包装器

然后包装器需要侦听App从（通过）传递的事件Wrapper

<slot :onInput="onInput" />

哪里onInput是处理数据的方法

见下面的例子

我会推荐以下阅读

• https://github.com/vuejs/vue/issues/4332（特别是埃文的回应为什么不可能）
• https://adamwathan.me/renderless-components-in-vuejs/ Adam 有一个完整记录的方法来使用渲染函数和插槽从 UI 中抽象功能。虽然它没有直接关系，但值得一读，并且可以提供更多关于使用 slot-scope 的信息以及一些关于改进 UI 组件结构的观点。