vue.js - 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>

魔法/技巧就在这里发生，我们使用槽作用域将输入的 input emit 函数绑定(bind)到 onInput 函数。

包装器

包装器然后需要监听从 Wrapper

传递(通过 App)的事件

<slot :onInput="onInput" />

其中 onInput 是处理数据的方法

请看下面的例子

我会推荐以下阅读 Material

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