19-作用域插槽的使用

最新推荐文章于 2024-03-13 15:47:03 发布

weixin_52135717

最新推荐文章于 2024-03-13 15:47:03 发布

阅读量57

点赞数

分类专栏： VUE基础语法文章标签： vue

本文链接：https://blog.csdn.net/weixin_52135717/article/details/109817495

版权

VUE基础语法专栏收录该内容

23 篇文章 0 订阅

订阅专栏

19-作用域插槽的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.min.js"></script>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn>
				
				<!--目的是获得子组件中的pLanguages-->
				<div slot-scope='slot'>        <!-- 在此调用 -->
					<span v-for="item in slot.data">{{item}}----</span>
				</div>
			</cpn>
			<cpn></cpn>
			
		</div>
		<template id="tem1">
			<div>
				<slot  :data='pLanguages'>  <!-- data可变    ，通过:data='pLanguages'拿到子组件的数组-->
				<ul>
					<li v-for="item in pLanguages" style="list-style: none;">{{item}}</li>
				</ul>
				</slot>
			</div>
		</template>
		<script>
			
			
			
			const app = new Vue({
				el:'#app',
				data:{
					
				},
				components:{
					'cpn':{
						template:'#tem1',
						data(){
							return{
								pLanguages:['javascript','python','swift','go','c++']
							}
						}
					}
				}
				
				
			})
		</script>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_52135717

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
19-作用域插槽的使用

19-作用域插槽的使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <script src="js/vue.min.js"></script> <body> <div id="app"> <cpn></cpn> &
复制链接

扫一扫