vue的slot

最新推荐文章于 2024-01-11 09:46:09 发布

未烟寻

最新推荐文章于 2024-01-11 09:46:09 发布

阅读量131

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_52513740/article/details/119038126

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

组件的插槽

组件的插槽也是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。

如何封装合适呢?
抽取共性，保留不同。

最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。
是搜索框，还是文字，还是菜单。由调用者自己来决定。

		<template id="qqq">
				<div>
				<h1>我是子组件</h1>
				<slot></slot>			//在组件中加入slot
				</div>
			</template>
				//在组件标签中的内容会放入slot中
				<cpn><button>按钮</button></cpn>
				<cpn><button>哈哈哈</button></cpn>
				<cpn><button>略略略</button></cpn>

也可以在slot标签中放入默认值,不放其他元素时,显示该默认值

也可以给slot标签命名,在插入时可根据标签选择(具名插槽)

<cpn><button slot="middle">999</button></cpn>

			<template id="qqq">
				<div>
				<h1>我是子组件</h1>
				<slot name="left">左边</slot>
				<slot name="middle">中间</slot>
				<slot name="right">右边</slot>
				</div>
			</template>

作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供。
即在父组件中获取子组件的数据,但由于作用域不能直接获取

1.在子组件中添加一个插槽,用v-bind并随便赋予一个属性值
	<slot :data = "language"></slot>

2.在父组件中的cpn插入template标签,并添加一个slot-scope="slot"的属性,切要使用
到子元素的地方用slot.data表示
			<cpn>
				<template slot-scope="slot">
				<ul>
					<li v-for="item in slot.data">{{item}}</li>
				</ul>
				</template>
			</cpn>

完整代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
			<div id="aaa">
				<cpn>
					<template slot-scope="slot">
					<ul>
						<li v-for="item in slot.data">{{item}}</li>
					</ul>
					</template>
				</cpn>
			</div>
			
			<template id="qqq">
				<div>
				<h1>我是子组件</h1>
				<slot :data = "language"></slot>
				</div>
			</template>
		

		
		<script type="text/javascript" src="../vue.js"></script>
		<script>
			const aaa=new Vue({
				el:'#aaa',
				components:{
						cpn:{
							template:`#qqq`,
							data(){
								return {
								language:['111','222','333','444']
										}
									}
							}
			}
				
			})
		</script>
	</body>
</html>

未烟寻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的slot

组件的插槽组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。如何封装合适呢?抽取共性，保留不同。最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。是搜索框，还是文字，还是菜单。由调用者自己来决定。 <template id="qqq"> <div> <h1>我是子组件</h1> &lt
复制链接

扫一扫