爷爷组件
<template> <div> <child-dom :foo="foo" :coo="coo" :goo='goo' v-on:upRocket="reciveRocket" > </child-dom> </div> </template> <script> import childDom from "./child.vue"; export default { data() { return { foo:"Hello, world", coo:"Hello,rui", goo:'googoo' } }, components:{childDom}, methods:{ reciveRocket(e){ console.log('爷爷组件传来的值',e) console.log("reciveRocket success") } } } </script>
父组件
<template> <div> <p>foo:{{foo}}</p> <p>attrs:{{$attrs}}</p> <grandson v-bind="$attrs" v-on="$listeners"></grandson> </div> </template> <script> import grandson from './grandson'; export default { name:'child-dom', props:[ "foo", //父组件不能接收,否则在孙子组件中获取不到值 ], // inheritAttrs:false, components:{grandson}, } </script>
孙子组件:
<template> <div> <p>coo:{{coo}}</p> <p>{{goo}}</p> <button @click="startUpRocket">我要发射火箭</button> </div> </template> <script> export default { name:'grandson', props:["coo","goo"], // inheritAttrs:false, methods:{ startUpRocket(){ this.$emit("upRocket",'传值到爷爷组件'); // console.log("startUpRocket") } } } </script>
首先我们来看下面的一张图,图中表示一个多级组件嵌套的情形。
现在我们来讨论一种情况,A组件与C组件怎么通信,我们有多少种解决方案?
- 我们使用VueX来进行数据管理,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,那使用VueX来实现该功能,并没有发挥出VueX的威力。
- 使用B来做中转站,当A组件需要把信息传给C组件时,B接受A组件的信息,然后利用属性传给C组件,这是一种解决方案,但是如果嵌套的组件过多,会导致代码繁琐,代码维护比较困难;如果C中状态的改变需要传递给A, 使用事件系统一级级往上传递 。本来
- 自定义一个Vue 中央数据总线,这个情况适合碰到组件跨级传递消息,但是使用VueX感觉又有点浪费的项目中,但是缺点是,碰到多人合作时,代码的维护性较低,代码可读性低
在很多开发情况下,我们只是想把A组件的信息传递给C组件,如果使用props 绑定来进行信息的传递,虽然能够实现,但是代码并不美观。
转:https://blog.csdn.net/songxiugongwang/article/details/84001967