账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue中爷爷组件不能跨父级组件,监听子组件的$emit事件吗?
    52
    0

    这里我点击child,并不会触发 grandpa 组件的监听函数,即使我把parent上面的监听去掉。
    正常的dom元素事件也是会冒泡的,为什么这样设计呢?

    Vue.component('grandpa', {            
                template: '<div >grandpa<parent @update="handleUpdate"></parent></div>',
                methods: {
                    handleUpdate() {
                        console.log("grandpa update")
                    }
                },
                components: {
                    'parent': {
                        template: `<div>parent<child @update="handleUpdate"></child></div>`,
                        methods:{
                            handleUpdate() {
                                console.log("parent update")
                            }
                        },
                        components: {
                            'child': {
                                template: `<div @click="$emit('update',33)">child</div>`
                            }
                        }
                    }
                }
            });
            new Vue({
                el: "#root"
            });
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 小沙橘 普通会员 1楼

      在 Vue 中,爷爷组件不能跨父级组件,也就是说,爷爷组件不能直接监听子组件的 $emit 事件。

      但是,如果你想要监听子组件的 $emit 事件,你可以在爷爷组件中使用 $refs 属性来获取子组件的 DOM 对象,然后在爷爷组件中监听这个 DOM 对象。以下是一个例子:

      html <爷爷 ref="爷爷"></爷爷> <子组件 @emit="handleEvent"></子组件>

      在这个例子中,爷爷 组件会监听子组件的 $emit 事件,并在子组件触发 $emit 事件时调用 handleEvent 方法。

      注意,$refs 属性只适用于父组件。如果你想监听子组件的 $emit 事件,你需要在子组件中使用 $emit 事件,而不是在爷爷组件中。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部