1、上代码:
(1)祖父级组件parent的代码:
<!-- 文件描述:祖先级组件 创建时间:2019/12/28 15:30 --> <template> <div class="" style=" 900px;height: 600px;background-color: #d6e7ff;padding: 20px;"> <span style="font-size: 20px;font-weight: bold;">祖先级组件:father</span> <br> 传给孙子级组件G的参数【toGdata】:{{toGdata}}<br> <input type="text" v-model="toGdata.name"> <div> <childrenA></childrenA> <childrenB></childrenB> <childrenC></childrenC> </div> </div> </template> <script> // 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) // 例如:import 《组件名称》 from '《组件路径》'; import childrenA from './childrenA' import childrenB from './childrenB' import childrenC from './childrenC' export default { name: 'father', provide () { return { toGdata: this.toGdata } }, // import引入的组件需要注入到对象中才能使用 components: { childrenA, childrenB, childrenC }, data () { // 这里存放数据 return { toGdata: { name: '李四' } } } } </script>
(2)儿子级组件C的代码:
<template> <div class="" style="float: left;margin: 10px; 250px;height: 500px;background-color: #eeff85;padding: 20px;"> <span style="font-size: 18px;font-weight: bold;">儿子级组件C:childrenC</span> <div> <childrenF></childrenF> <childrenG></childrenG> </div> </div> </template>
(3) 孙子级组件G的代码:
<!--文件描述:孙子级组件G 创建时间:2019/12/28 15:37--> <template> <div class="" style="float: left;margin: 10px; 200px;height: 200px;background-color: #ff00de;padding: 20px;color:#fff;"> <span style="font-size: 14px;font-weight: bold;color:#fff;">孙子级组件G:childrenG</span> <div style="color:#0009ff;"> 接受来自祖父级组件parent的数据【toGdata】:{{toGdata}} <input type="text" v-model="fromParentData.name"> </div> </div> </template> <script> export default { name: 'childrenA', inject: ['toGdata'], // import引入的组件需要注入到对象中才能使用 components: {}, data () { // 这里存放数据 return { fromParentData: this.toGdata } } } </script>
注意: 这里不论子组件嵌套有多深, 只要调用了 inject
那么就可以注入 provide
中的数据,而不局限于只能从当前父组件的props属性中回去数据
2、传递参数为值类型(基本类型),接受参数的组件中不能进修改,传递对象或者数组,可以直接进行修改,并且可以影响祖先级组件
(1)toGdata传值改为:String,在孙子级组件G中直接修改则报错:
在祖父级组件parent中直接修改,没有传递到孙子级组件G:
(2)toGdata传值改为:Object,在孙子级组件G中直接则对应的祖先级组件数据也会受到影响,原因还是堆和栈储存数据的问题:
3、结论:在简单的功能模块,可以通过传递对象实现跨级组件通信,复杂的功能模块不建议使用,因为传递的数据,如果其他的儿子级组件,其他儿子级组件的孙子级组件也在使用的话,会造成数据的混乱,甚至无法理解数据是在哪里变化的,排查故障艰难。跨级组件通信可以定义一个中央事件总线(eventBus),但是更复杂的系统,还是建议使用vuex。