template 标签 VUE v-slot 用法

匿名插槽(也叫默认插槽)

没有名字，但是只能有一个

父
<todo-list> 
    <template v-slot:default>
       任意内容
       <p>我是匿名插槽 </p>
    </template>
</todo-list> 
子
<slot>我是默认值</slot>

具名插槽

比上面的好点有个名字

父
<todo-list> 
    <template v-slot:todo>
       任意内容
       <p>我是匿名插槽 </p>
    </template>
</todo-list> 
// todo
data() {
   return {
    dynamicSlotName:"todo" 
   }
 },
子
<slot name="todo">我是默认值</slot>

作用域插槽(子组件内数据可以被父页面拿到)

组件中使用最多，掌握这个就可以了

<!--父页面 -->
<slot-test :list="list">
	<template v-slot="{datas}">
		<view style="color: #4CD964;">
		《{{datas.name}},我在外面》
		</view>
	</template>
</slot-test>
<slot-testno>
	<template v-slot:default>
	       <!-- <p>我是匿名插槽 </p> -->
	</template>
</slot-testno>
<slot-testname>
	<template v-slot:todo>
	      <!-- 任意内容
	       <p>我是匿名插槽 </p> -->
	</template>
</slot-testname>

//父页面 引用组件
	import slotTest from '../../components/slotTest/index.vue'
	import slotTestno from '../../components/slotTest/noneIndex.vue'
	import slotTestname from '../../components/slotTest/nameIndex.vue'
	export default {
		components: {
			slotTest,
			slotTestno,
			slotTestname
		},
		data() {
			return {
				title: 'Hello',
				list:[{name:"小王",age:10},{name:"小王1",age:11},{name:"小王2",age:20}]
			}
		},

<!--子页面 components/slotTest/index.vue  作用域插槽-->
<template>
	<view class="">
		<view v-for="(item,index) in list" :key='index'>
			<view style="color: #007AFF;">我是插槽里面</view>
			<slot :datas='item'></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				// current: 0,
				// slots: false
			};
		},
		watch: {
			// 判断异步数据源，是否使用插槽自定义样式
			list: {
				handler(val) {
					// 可以在这里处理一下数据了
					if (val.length > 0 && this.$slots.default) {
						this.slots = true
					}
				},
				immediate: true,
			}
		},
		methods: {
		}
	}
</script>

最后的效果：