父子组件通信可以用:
props
$emit / v-on
$attrs / $listeners
ref
.sync
v-model
$children / $parent?
兄弟组件通信可以用:
EventBus
Vuex
$parent
跨层级组件通信可以用:
provide / inject
EventBus
Vuex
$attrs / $listeners
?
通信使用写法
父向子传递数据 ?常用的就是props
子组件接收到数据之后不能直接修改父组件的数据, ?当父组件重新渲染时 ? 数据会被覆盖 .?
如果子组件内要修改的话用computed比较好
prop 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 prop 只读，不可被修改
.sync
父组件向子组件传递数据的双向绑定 ? ? 子组件接收到的数据可以直接修改 ? 并且会同时修改父组件的数据
v-model
和.sync类似 ? 可以实现将父组件传给子组件的数据为双向绑定, 子组件通过$emit修改父组件的数据
ref
ref如果在普通的DOM元素上 ? 指向的就是该DOM元素
?如果在子组件上, ? 引用的指向就是子组件实例, ?父组件就可以通过refs主动获取子组件的属性或者调用子组件的方法
$emit ?/ ?v-on
子组件通过派发事件给父组件数据, ?或者触发父组件更新等操作
$emit()——把事件沿着作用域链向上派送
v-on 指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件
$attrs / listeners
多层嵌套组件传递数据 ?如果只是传递数据,而不做处理的话就用这个 ?
? ?$attrs : ? ?包括父作用域里面除了class 和 style 除外的非props属性集合. ?通过this.$attrs获取父作用域中所有符合条件的属性集合 ? ? 然后继续传给子组件内部其他的组件 ? ?就可以通过v-bind = "$linteners"
? ?$listeners: ? 包括了父作用域里 .native除外的监听事件集合. ? 如果还要传给子组件内部的其他组件, ?可以通过v-on = '$linteners'
$children / $parent
$children : 获取到所有只包含子组件的VueComponent对象数组, 可以直接拿到子组件中所有的数据和方法等 ?不包括孙组件
$parent ?: ?获取到一个父节点的VueComponent对象, ?同样包含父节点中所有数据和方法等
provide ?/ ?inject
? ? ? ? provide ?/ ?inject ? 为依赖注入 , ?不推荐直接用于应用程序代码中, 但是在一些插件或组件库里 ?被常用 ? 避免重复声明props
provide : ?可以让我们指定想要提供给后代组件的数据或方法
inject : ?在任何后代组件中接收想要添加在这个组件上的数据或方法, ?不管组件嵌套多深都可以直接用
? ? ? ? 这两个传递的数据不是响应式的?
EventBus
EventBus 是事件总线, ?不管是父子组件 ,兄弟组件 , ?跨层级组件等都可以使用它完成通信操作
Vuex
Vuex是状态管理器, ? 集中式存储管理所有组件的状态. ??
$root
$root 可以拿到APP.vue里面的数据和方法
访问跟组件的属性和方法: $root 只是对根组件有用, 不是父组件, $root 只是对根组件有用
slot
slot就是把子组件的数据通过插槽的方式传给父组件使用, ? 然后在插回来 ? 就是用来占个坑使用时候将组件之间的内容用来填坑
?
最常见的几种:
1.props ?父向子传值
1.1父组件通过:自定义名称="值",
1.2子组件使用props接受,与data同级,子组件接收到数据之后，不能直接修改父组件的数据。否则会报错，因为当父组件重新渲染时，数据会被覆盖。如果只在子组件内要修改的话推荐使用 computed.
2.$emit 子向父传值
2.1子组件通过this.$emit('自定义事件',参数) ?
2.2父组件用@接受自定义事件,并定义方法.
3.v-model
3.1向标签内的value属性赋值
给标签绑定input事件, 并把收到的值, 赋予给vue变量
//也可作为组件的双向绑定,@input和:value
//数据改变影响视图 视图的内容发生改变会影响数据
//复选框的属性值是字符串则收集的是boolean
//属性值是数组则收集到的是value
4..sync
4.1与v-model一样,但是v-model只能用一次,.sync可以用多次,vue3中删除了.sync
5.provide inject
5.1在祖先组件使用provide(key,value)传值
5.2在子辈组件使用nject('事件名')接收
6.ref
6.1ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例.
6.2可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种
7.$parent $children
7.1通过parent可以获父组件实例 ，然 后通过这个实例就可以访问父组件的属 性和方法 。
它还有一个兄弟root，可以获取根组件实例。
8.$attrs和$listeners
8.1正常情况下需要借助父亲的props作为中间过渡，但是这样在父亲组件就会多了一些跟父组件业务无关的属性，耦合度高，借助$attrs可以简化些，而且祖跟孙都无需做修改
9.bus
9.1在src中新建一个Bus.js的文件，然后导出一个空的vue实例 ?
9.2在传输数据的一方引入Bus.js ，然后通过Bus. $emit ( “ 事 件 名 ” , "
参 数 " ) 来 派发事件 ， 数据是以$emit()的参数形式来传递 ?
9.3在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})
?
10.Vuex跨组件通信
10.1一般用于解决复杂组件之间的通信传值
11.store路由
11.1A页面跳转B页面时使用this.router.push(/B?name=danseek), B页 面可以使用this.route.query.name 来获取A页面传过来的值
上面要注意router和route的区别.
12.slot
12.1插槽也可以作为是组件之间传参.
13.$root
13.1可以拿到 App.vue 里的数据和方法
14.pinia
14.1菠萝传参与vuex基本一致
?