最全种类:(大概?)
目录
15.LocalStorage/SessionStorage
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
16.1混入(mixin)提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项(如data、methods、mounted等等)。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
17.@hook:mounted=“handleChildMounted”
17.1当使用别人的组件时,希望别人的组件进入这个生命周期,父组件做出对应处理,又不好意思改动别人组件时,可以用@hook:生命周期=“父组件事件名”,来让父组件做对应的事情。