2.4 插槽slot的基本使用

最新推荐文章于 2024-07-14 18:38:01 发布

XinXun

最新推荐文章于 2024-07-14 18:38:01 发布

阅读量501

点赞数

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

本文链接：https://blog.csdn.net/zpxinxun/article/details/117172115

版权

Vue 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

slot的基本使用

最好的封闭方式就是将共性抽取到组件中，将不同暴露为插槽。

一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。是搜索框还是文字还是菜单，由调用者自己来决定。

可以给插槽默认值，方法是在组件中的slot标签内写明默认内容。如果调用组件时没有指定插槽内容，将使用默认值。

<body>
	<div id="app">
			<!-- 在此处写入slot内容 -->
			<cpn><a href="#">slot替换的内容</a></cpn>
	</div>
	<template id="cpn">
		<div>
			<h1>我是子组件</h1>
			<!-- 预置slot，可以指定默认值  -->
			<slot><span>我是默认值</span></slot>
			<h1>子组件结束</h1>
		</div>
	</template>
	<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const app=new Vue({
			el:'#app',
			components:{
				cpn:{
					template:'#cpn'
					}
				}
		})
	</script>
</body>

具名插槽的使用

针对组件内有多个slot插槽的情况。通过具名决定替换那个插槽。

1.给插槽具名。给slot添加name属性。<slot name="one"></slot>

2.在组件标签内指定插槽内容时,根元素添加slot属性，属性值为name属性值。

<body>
	<div id="app">
			<!-- 在此处写入slot内容 -->
			<cpn><a slot="one" href="#">slot替换的内容</a></cpn>
	</div>
	<template id="cpn">
		<div>
			<h1>我是子组件</h1>
			<!-- 预置slot，可以指定默认值  -->
			<slot name="one"><span>我是默认值</span></slot>
			<h1>子组件结束</h1>
		</div>
	</template>
	<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const app=new Vue({
			el:'#app',
			components:{
				cpn:{
					template:'#cpn'
					}
				}
		})
	</script>
</body>

作用域插槽的使用

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

1.组件slot标签中使用data属性绑定组件数据变量

2.在父中，子组件标签内，使用template标签，使其slot-scope属性等于任何变量名.

3.通过slot-scope属性的变量加data引用子组件中的数据。此处的data可以随意指定，只要引用时保持一致。

<body>
	<div id="app">
			<!-- 此处使用作用域插槽 -->
			<cpn>
				<template slot-scope="abc">
						<span v-for="item in abc.data">{{item}} --- </span>
				</template>
			</cpn>
			<cpn></cpn>
			<cpn></cpn>
	</div>
	<template id="cpn">
		<div>
			<slot :data="pLanguages">
				<ul>
					<li v-for="item in pLanguages">{{item}}</li>
				</ul>
			</slot>
		</div>
	</template>
	<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const app=new Vue({
			el:'#app',
			components:{
				cpn:{
					template:'#cpn',
					data(){
						return {
							pLanguages:['C++','Java','PHP','QBasic']
						}
					}
					}
				}
		})
	</script>
</body>