VUE插槽

插槽

// 父组件
<my-h2>猪猪雨</my-h2>

//子组件
<h2>
	<slot></slot>
	<!-- 
        <slot></slot> 代表了 my-h2组件标签内部包含的内容
        slot 标签里面的内容 是默认的展示值 (当my-h2组件标签的为空标签时展示)
    -->
</h2>

具名插槽

// 父组件
<my-h2>
	<!-- <p slot="xy">小雨</p>
	<i slot="xw">小吴</i>-->
	<!-- slot这种方法将要被废弃用下面的这种方法 -->

	<!-- v-slot 只能用在 template标签 和 组件 上面 -->
	<template v-slot:xy>
		<i>小雨</i>
	</template>
	<template v-slot:xw>
		<i>小吴</i>
	</template>
</my-h2>

//子组件
<slot name="xw"></slot>
<slot name="xy"></slot>

作用域插槽

// 父组件
<my-h2 :list="arr">
	<template slot-scope="www">
		<h1>{{www.qqq.a}}</h1>
	</template>
</my-h2>
data() {
	return {
		arr: [{ a: 111 }, { a: 222 }, { a: 333 }]
	};
}

// 子组件
<ul>
	<li v-for="item in list" :key="item.a">
		<slot :qqq="item"></slot>
	</li>
</ul>