Vue父子组件传值---- $listeners子传父的父

原创

已于 2022-05-01 15:05:52 修改

· 1.3k 阅读

4 ·

版权

文章标签：

#vue

于 2022-04-27 23:46:18 首次发布

本文介绍了在Vue中如何实现子组件向父组件，甚至是跨越一级父组件向祖父组件传值的方法。通过示例代码，展示了在子组件（demo1）中使用事件触发，在中间组件（demo2）中利用$vlisteners属性，以及在祖父组件（demo3）中接收并处理这些事件的技巧。这种$listeners的使用简化了多级子组件事件传递的复杂性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在写vue子组件给父组件传值时，一不小心写了五个组件，这个时候用到了子组件给父组件传值，其中不乏子组件跨过它的父组件，给它的父组件的父组件传值，也就是给它的爷爷传值。听到这里是不是快晕了，来，上干货。
这是demo1,也是最底层的子组件：

<template>
    <div >子组件01
        <Button type="primary" @click="submit('formValidate')">确定</Button>
    </div>
</template>

<script>
    export default {
   
        name: "demo1",
        methods(){
   
            submit (name)
            {
   
                this.$refs[name].validate((valid) =