📒 笔记文档

组件之间相互传递数据。

props

• 父传子

//父组件
let car = ref('奔驰')
<Child :car="car"/>

//子组件
defineProps(['car']);

• 子传父

//父亲声明一个带参的方法，子组件调用
function recieveFun(value:string){
	console.log('父接收到子数据：',value)
}
<Child :recieveFunc="recieveFun"/>

//子调用传递
let toy = ref('奥特曼')
let props = defineProps(['recieveFun']);
//调用
<button @clike="recieveFun(toy)">调用传递</button>

自定义事件

​ 子传父

• 概念

<button @clike="test(1,$event)">调用传递</button>   //$event 事件对象

function test(x:number,y:Event){
    console.log(x,y)
}

• 示例

//父组件定义函数，并且给子组件绑定事件。
<Child @haha="func"/>
function func(value:number){
    
}

//子组件需要声明事件。触发事件，触发事件之后就可以给父组件传递参数
const emit = defineEmits(['haha'])
<button @click="emit('haha',666)" >点击</button>

mitt

订阅发布。任意组件通信

//引入mitter
import mitt from 'mitt'
const emitter = mitt();
export default emitter

//定义事件
emitter.on("emit1",(value)=>{
	console.log(value)
})

//触发事件
emitter.emit("emit1(123)")

//解绑事件
emitter.off("emit1")

//全部解绑
emitter.all.clear()

v-model

自定义组件进行的 v-model

本质是v-bind+@input

<myInput v-model="username"/>

但是自定义的组件myInput处理起来就很麻烦。这里不做示例了。

$attrs

​ 用于实现当前组件的父组件，向当前组件的子组件通信（祖->孙）

父亲通过props传递的参数如果子组件没有使用defineProps声明，传递过来的参数会放在$attrs中。

• 向下传

//父
let a = ref(0)
let b = ref(2)
let c = ref(3)
<Child :a="a" :b="b" :c="c"/>
    
//子
//defineProps(['a','b'])//直接不接收
//直接把父数据给到孙辈
<GrandChild v-bind="$attrs"/>
    
//孙
defineProps(['a','b','c'])

//甚至重孙

• 向上传

//父定义方法。

//后辈调用方法

$ref和$parent

$ref 父传子

$ref 子传父

provide_inject

祖孙之间直接通信，不需要中间。

• 向后代提供数据

//祖
import {provide} from 'vue'
let a = ref(10)
let car = reactive({brand:'本次',price:120})
provide("a",a)
provide("car",car)

//孙
let x = inject('a',0) //这里的0为默认值，如果没有接收到a那么x=0
let car = inject('car',{brand:'未知',price:0}) //设置默认值，防止推断报错

• 后代向上层传递数据

//祖
import {provide} from 'vue'
let a = ref(10)
let car = reactive({brand:'本次',price:120})
function a_add(value){
    a -= value
}
provide("a_context",{a,a_add}) //a的上下文，这个上下文饱含a和一个a_add函数
provide("car",car)


//孙
lex {a,a_add} = inject("a_context",{a:0,a_add:(value:number)=>{} })
a_add(6)