Vue3的7种和Vue2的12种组件通信，值得收藏
最新回答
贫尼想借色
2025-03-30 03:34:02
Vue3通信使用写法props
用props传数据给子组件有两种方法，如下
方法一，混合写法
方法二，纯Vue3写法
注意：
如果父组件是混合写法，子组件纯Vue3写法的话，是接收不到父组件里data的属性，只能接收到父组件里setup函数里传的属性
如果父组件是纯Vue3写法，子组件混合写法，可以通过props接收到data和setup函数里的属性，但是子组件要是在setup里接收，同样只能接收到父组件中setup函数里的属性，接收不到data里的属性
官方也说了，既然用了3，就不要写2了，所以不推荐混合写法。下面的例子，一律只用纯Vue3的写法，就不写混合写法了
$emit / expose / ref
父组件获取子组件的属性或者调用子组件方法
attrs
attrs：包含父作用域里除class和style除外的非props属性集合
v-model
可以支持多个数据双向绑定
provide / inject
provide / inject为依赖注入
provide：可以让我们指定想要提供给后代组件的数据或
inject：在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用
Vuex
Vue2.x组件通信方式
Vue2.x组件通信共有12种
父子组件通信可以用：
兄弟组件通信可以用：
跨层级组件通信可以用：
Vue2.x通信使用写法
下面把每一种组件通信方式的写法一一列出
1. props
父组件向子组件传送数据，这应该是最常用的方式了
子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用computed
2. .sync
可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据
3. v-model
和.sync类似，可以实现将父组件传给子组件的数据为双向绑定，子组件通过$emit修改父组件的数据
4. ref
ref如果在普通的DOM元素上，引用指向的就是该DOM元素;
如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过ref主动获取子组件的属性或者调用子组件的方法
5. $emit / v-on
子组件通过派发事件的方式给父组件数据，或者触发父组件更新等操作
6. [公式]listeners
多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时
$attrs：包含父作用域里除class和style除外的非props属性集合。通过this.[公式]attrs"
$listeners：包含父作用域里.native除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过v-on="$linteners"
使用方式是相同的
7. [公式]parent
$children：获取到一个包含所有子组件(不包含孙子组件)的VueComponent对象数组，可以直接拿到子组件中所有数据和方法等
$parent：获取到一个父节点的VueComponent对象，同样包含父节点中所有数据和方法等
8. provide / inject
provide / inject为依赖注入，说是不推荐直接用于应用程序代码中，但是在一些插件或组件库里却是被常用，所以我觉得用也没啥，还挺好用的
provide：可以让我们指定想要提供给后代组件的数据或方法
inject：在任何后代组件中接收想要添加在这个组件上的数据或方法，不管组件嵌套多深都可以直接拿来用
要注意的是provide和inject传递的数据不是响应式的，也就是说用inject接收来数据后，provide里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象
所以建议还是传递一些常量或者方法
9. EventBus
EventBus是中央事件总线，不管是父子组件，兄弟组件，跨层级组件等都可以使用它完成通信操作
定义方式有三种
使用如下，以方法一按需引入为例
10. Vuex
Vuex是状态管理器，集中式存储管理所有组件的状态。这一块内容过长，如果基础不熟的话可以看这个Vuex，然后大致用法如下
比如创建这样的文件结构
index.js里内容如下
然后在main.js引入
然后在需要的使用组件里
11. $root
$root可以拿到App.vue里的数据和方法
12. slot
就是把子组件的数据通过插槽的方式传给父组件使用，然后再插回来
结语
写作不易，你的一赞一评，就是我前行的最大动力。
热门标签
