作用域插槽的作用及简单案例

最新推荐文章于 2024-09-23 09:43:36 发布

l_aaaaaa

最新推荐文章于 2024-09-23 09:43:36 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/l_aaaaaa/article/details/107028584

版权

作用域插槽的作用：父组件替换插槽的标签，但是内容由子组件来提供。

父组件替换子组件插槽中的标签，但是内容是由子组件来提供的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<mycpn></mycpn>
			<mycpn>
				<!-- 2.固定写法获取子组件传过来的值
				 
				 <template slot-scope="slot111">
				 	
				 </template>
				 slot111.子组件插槽中的自定义的data11  就可以在父组件中获取子组件的值。
				 比如此案例Wie
				 slot111.data11==['唐诗三百首','宋词','儿歌三百首','中国神话故事']
				 -->
				<template slot-scope="slot111">
					<span>{{slot111.data11.join('-')}}</span>
				</template>
			</mycpn>
			
		</div>
		<template id="cpn">
			<div>
				<!--1. 此处的意思是将子组件的books赋值给自定义的属性data11 -->				
				<slot :data11="books">
					<ul>
						<li v-for="item in books">{{item}}</li>
					</ul>
				</slot>
			
			</div>
		</template>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					books:"父组件的数据!"
				},
				//子组件
				components:{
					mycpn:{
						template:'#cpn',
					    data(){
							return{
								books:['唐诗三百首','宋词','儿歌三百首','中国神话故事']
							}
						}
					},
				}
			})
		</script>
	</body>
</html>