Vue知识整理day1

几大常用插槽（props、emits、provide等）

• 父组件传子组件 => 父组件中在子组件标签上绑定传递的参数名（前面加:） 子组件在props中定义该参数名并定义类型

父组件
<component :name=""></component>

子组件
props:{
	name:{
		type:String,
		default:""
	}
}

• 子组件传父组件 => 子组件中先注册 emits:[“参数名”], methods:{子定义事件名(){ this.$emit(“参数名”,传参)}}
  父组件中对应的子组件标签中添加 @参数名 = “父定义事件名”，并在下面写父定义事件名

父组件
<component @homeClick="homeClick"></component>  //@homeClick就表示接收的子组件参数名
...
methods:{homeClick(payload){console.log(payload)}}

子组件
props:{...}
emits:["homeClick"],
methods:{
	homeBtnClick(){
		this.$emit("homeClick","home")
	}
}

• 父传子孙组件 provide 和 inject

父组件
import {  provide, ref } from 'vue'
...
setup(){
	let info = ref("...")
	provide('info', info)
	return {
		info
	}
}

子组件
import { inject } from 'vue'
...
setup(){
	const info = inject('info');
	.....修改info.value的值
	return {
		info
	}
}