学习vue的组件,可能很多人已经了解了组件的创建注册使用,但是随之而来的就是组件之间的通信,父子组件怎么传? 兄弟组件怎么传? 不是父子组件又怎么传?

接下来介绍几种组件之间的传参方式,也是很容易面试被问到的.

父组件传递参数给子组件的时候,可以使用props这个属性

讯享网

emit是发射的意思,也就是,子组件需要向父组件传递数据使用emit来发射一个自定义事件,在子组件上绑定该自定义事件,同时在父组件上有个对应的事件进行双向绑定事件,直接上代码.

这是一重灰常人性化的 传参方式，其实也就是拿参数的一种简便方式 ，ref属性被用来给元素或者组件注册引用信息，引用信息会注册在父组件的\(ref对象上（如果ref放在对象上，拿到的是原生节点，ref放在组件上，拿到的就是组件实例），我们先来看一下代码<br></p><p> 我已经注册了两个组件,并且在vue根组件上使用,绑定了ref<br></p><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//_667c20e473e6f94299.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='vue传参 function vue传参三种方式子传父_vue.js_05' title="在这里插入图片描述" style="width: 559px; visibility: visible;"></p><p>我们可以去vue实例里面的生命周期函数mounted里面打印一下这个 <strong>this.\)fefs ,看看能打印出什么信息.

可以看大在控制台打印出了两个子组件实例,而且是一数组的方式存储,相当于ref=‘键名’

取出来的话使用this.\(refs.aaa</strong> 这样就可以拿到这个组件实例</p><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//_667c20e4ac0fa98590.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='vue传参 function vue传参三种方式子传父_es6_06' title="在这里插入图片描述" style="width: 608px; visibility: visible;"></p><p><br></p><p> 通过对象引用的方式就可以拿到不同组件实例上的不同参数和方法<br></p><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//_667c20e5104b.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='vue传参 function vue传参三种方式子传父_vue传参 function_07' title="在这里插入图片描述" style="width: 923px; visibility: visible;"></p><p><br></p><p> 这里子不能访问父.↓<br></p><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//_667c20e.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='vue传参 function vue传参三种方式子传父_es6_08' title="在这里插入图片描述" style="width: 750px; visibility: visible;"></p><p><br></p><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//_667c20e5e0.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='vue传参 function vue传参三种方式子传父_vue.js_09' title="在这里插入图片描述" style="width: 973px; visibility: visible;"></p><p>顾明思议,<strong>this.\)parent 拿到的就是当前实例组件的父组件,记住是父组件,不是父组件之上的组件,他爸爸的爸爸已经是爷爷了,不是父亲了.而 this. \(root</strong> 拿到的是根组件,也就是这个根组件实例.</p><p><strong>查看\)parent的内容

1.建立事件中心

2.使用事件中心发射自定义事件

3.使用事件中心接受数据

我們先來想一个需求,假如子组件中有一组数据,但是想以不同的形式展示在父组件中,处理使用$emit等传参方式,也可以使用作用域插槽.

子组件一

子组件二