vue组件传值插槽

vue组件

初识Vue组件

组件的本质是一个可复用的小号vue实例
根组件

vue实例（new Vue）是最大的跟组件

全局组件

Vue.component('组件名‘，配置对象) 全局组件可以用在不同实例中

局部组件

局部组件只能定义在组件中（实例中）

父子组件

组件间通信

子组件获取父组件数据

父组件：
<Child msg="父组件的数据"></Child>
子组件:

<script lang="ts">
export default defineComponent({
 props:{
	msg:{
		required:true, // 定义父组件是不是必须传递这个值
		type:String, //定义msg的值的类型，
		default:'默认值' //定义msg的默认值
	}
 }
})
</script>`

子组件通过props获取到父组件的值，props可以定义这个值的类型以及父组件是否必须传值

父组件获取子组件数据
子组件

<script lang='ts'>
export default defineComponent({
	setup(props,context){
	const state:any = reactive({
		msg:'子组件向父组件传值、父组件获取子组件数据'
	})
		const sendMsg = ()=>{
			context.emit('FaterSendMsg',state.msg)
		}
	}
})
</script>

父组件

<Child @FaterSendMsg = 'sendMsg'></Child>
// FaterSendMsg 是子组件中定义的方法
<script>
	const sendMsg = (val:any)=>{
	// val 是子组件传递过来的值
		console.log(val) //子组件向父组件传值、父组件获取子组件数据
	}
</script>

多级组件通信

provide 声明要传递的数据
inject 接收数据

slot插槽

父组件
<div>
	<Child>
		父组件传递给子组件的信息
		<button>按钮</button> // 带标签的内容
		<Child2></Child2> // 组件
	</Child>
</div>

子组件
<div class="child">
	<h2>子组件使用插槽</h2>
	<slot>子组件插槽内容</slot>
</div>

// 子组件使用插槽
// 父组件传递给子组件的信息

slot 与props的区别

通过props属性，父组件只能向子组件传递属性、方法
插槽还能传递带标签的内容，甚至组件

匿名插槽，具名插槽

匿名插槽
一个组件只能有一个匿名插槽
可以放在组件的任意位置
匿名插槽只能作为没有slot属性的元素的插槽

具名插槽
具有名字的插槽，名字通过属性name定义
<slot name="left">插槽内容</slot>
一个组件中可以有多个具名插槽，可以出现在不同位置

作用域插槽

子组件
<div class="child">
	<slot v-bind:childData="childUser"></slot>
</div>
<script>
export default{
	data(){
		return {
			childUser:{name:'Tom',age:'12'}
		}
	}
}
</script>

父组件
<div>
	<Child v-solt:default="slotProps"> // default 可省略
		{{slotProps.ChildData.name}}
		{{slotProps.ChildData.age}}
	</Child>
</div>

多个作用域

子组件
<div class="child">
	<slot v-bind:childData="childUser"></slot>
	<slot name="other" v-bind:otherChildData = "otherUser"></slot>
</div>
<script>
export default{
	data(){
		return {
			childUser:{name:'Tom',age:'12'},
			otherUser:{last:'啦啦啦'}
		}
	}
}
</script>

父组件
<div>
	<Child>
		<template v-slot:default="slotProps"> // 多个插槽的时候，default 不能省略
		{{slotProps.childData.name}}
		</template>
		<template v-bind:other="otherSlotProps"> // 具名插槽
		{{otherSlotProps.otherChildData.last}}
		</template>
	</Child>
</div>

插槽的省略

匿名插槽省略（组件中有多个插槽时，default不可省略）
<Child v-slot:default="slotProps"></Child>
可省略为 <Child v-slot="slotProps"><Child>
亦可省略为 <Child #default="{slotProps}"></Child>
具名插槽省略
<Child v-slot:other="slotProps"></Child>
<Child #other="{slotProps}"></Child>