Vue.js vue在使用插槽时将数据发射回父级

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

这在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>

{{nextbuttonext}}

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>

---

上面的代码只是为了说明问题。

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

因此，在一个示例中，您有一个父

App

组件，其中包含一个

Wrapper

，在插槽中有一个

MyInput

组件

我的输入

MyInout

组件不会自动更新其他组件，因此需要将其设置为

$emit

内部数据

这可以使用输入的

监视

、

@change

侦听器或其他方式来完成。您可以在数据更改时发出多个数据，也可以对所有数据使用单个有效负载

this.$emit（“输入”，myData）；

应用程序

App

需要在

MyInout

和

Wrapper

这里有个魔术，我们使用slot scope将输入的

input

emit函数绑定到

onInput

函数

包装纸 然后，包装器需要从

包装器



其中，
onInput
是一种处理数据的方法

参见下面的示例


我建议阅读以下内容


（特别是埃文对为什么不可能的回答）
Adam有一个完整的文档化方法，使用渲染函数和插槽从UI抽象功能。虽然它不是直接相关的，但值得一读，它可能会提供更多关于使用插槽范围的信息，以及一些关于改进UI组件结构的观点
您是否试图让包装器发出CustomComponent`中的数据？是的，这正是我想要的。将按钮移动到插槽是否更好？您需要使包装器可以访问数据。您可以使用$emit和slot scopeOk实现这一点。谢谢，您能否提供一个示例，如如何将其应用到我的示例中？我读过slot scope上的文档，但对于新手来说，这并不容易理解。IMHO，这是一个非常混乱的概念。我正在写一个答案，但是你可以在这里看到一个有效的例子，非常感谢——它在我的项目中帮助了我。您的示例很简单，并结合您的说明以一种易于理解的方式展示了该功能。我一直在尝试做同样的事情，但使用Vue 2.6和v-Slot，但似乎无法使事情正常工作。你能举个例子吗？我有点抓紧救命稻草了。谢谢如果这不能回答你的问题，你可能需要用你的具体问题/代码/等打开一个新的问题。在沙盒上准备一个最小的（非）工作示例将有助于更快地解决你的问题。实际上，它确实回答了我的问题。只是因为插槽作用域现在已被弃用，所以我想知道如何使用Vue的新语法实现您的解决方案。实际上，我能够解决这个问题。你必须把v-slot指令放在标签上，而不是标签上，它就会工作。