使用Vue怎么实现孙组件向爷组件通信?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
思路
在孙组件被点击后 emit 事件 1 和孙组件的名字
在父组件上监听孙组件 emit 出的事件 1,再次 emit 事件 2
在爷组件上监听父组件 emit 出的事件 2,并触发处理函数
这个处理函数将父组件传出的子组件名字显示在父组件上
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
</head>
<body>
<div id="app">
child name: {{child}}
<parent v-on:say2='greeting("child", $event)'></parent>
</div>
</body>
<script>
Vue.component('parent', {
template: `
<div>
<child v-on:say1='$emit("say2", $event)'></child>
</div> `
})
Vue.component('child', {
template: `
<div>
child
<button v-on:click='$emit("say1", "Jack")'>greeting</button>
</div>
`
})
new Vue({
el: '#app',
data: {
child: '',
},
methods: {
greeting: function (key, value) {
this[key] = value
},
}
})
</script>
</html>
看完上述内容,你们掌握使用Vue怎么实现孙组件向爷组件通信的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。