跨组件传参的方式

目录

1.props 父向子传值

2.$emit 子向父传值 

3.v-model

4. .sync

5.provide inject

6.ref

7.$parent $children

8.$attrs和$listeners

9.bus

10.Vuex跨组件通信

11.store路由

12.slot

13.$root

14.pinia

15.LocalStorage/SessionStorage

16.mixin 

17.@hook:mounted=“handleChildMounted” 

---

1.props 父向子传值

// V3 defineProps<{ key: 类型 }>()

1.1父组件通过:自定义名称="值",

1.2子组件使用props接受,与data同级,子组件接收到数据之后，不能直接修改父组件的数据。否则会报错，因为当父组件重新渲染时，数据会被覆盖。如果只在子组件内要修改的话推荐使用?computed.

2.$emit 子向父传值 

// V3 const emit = defineEmits<{ (e: 'key', 名: 类型): 返回值 }>()

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基本一致

15.LocalStorage/SessionStorage

15.1通过数据存储的方式进行传递拿取,储存需要转JSON格式

16.mixin 

混入（mixin）提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项（如data、methods、mounted等等）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

17.@hook:mounted=“handleChildMounted” 

当使用别人的组件时，希望别人的组件进入这个生命周期，父组件做出对应处理，又不好意思改动别人组件时，可以用@hook:生命周期=“父组件事件名”，来让父组件做对应的事情。