vue 插槽slot

最新推荐文章于 2022-05-16 17:28:43 发布

Brrby

最新推荐文章于 2022-05-16 17:28:43 发布

阅读量148

点赞数

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

本文链接：https://blog.csdn.net/qq_30433703/article/details/109334031

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

插槽slot

基本使用
给插槽设置默认值
具名插槽

插槽是为组件空一个位置可以在需要的时候填上对应需要的标签内容

基本使用

<body>
<div id="app">
	<c1></c1>
	<c1><a href='www.baidu.com'>我是a</a></c1>
	<c1><i>我出来了</i></c1>
	<c1><button>点击</button></c1>
</div>
<template id='temp1'>
	<div style='border:1px solid black;width:20%'>
		<p>我是组件</p>
		<slot></slot>
	</div>
</template>	
<script>
const c1={
	template:'#temp1'
};
new Vue({
  el: '#app',
  components:{
  	c1
  }
})
</script>
</body>

在这里插入图片描述

给插槽设置默认值

<body>
<div id="app">
	<c1></c1>
	<c1><i>slot的默认值span变成了button</i></c1>
	<c1></c1>
</div>
<template id='temp1'>
	<div style='border:1px solid black;width:20%'>
		<slot><span>左边</span></slot>
	</div>
</template>	
<script>
const c1={
	template:'#temp1'
};
new Vue({
  el: '#app',
  components:{
  	c1
  }
})
</script>
</body>

在这里插入图片描述

具名插槽

一个组件里可以有多个插槽，当这些插槽在使用的时候需要修改的时候就要用具名插槽，即给插槽取一个name
当一个模板里有多个slot而在使用组件的时候只需要替换某一个具体的slot时，需要用name来关联

<body>
<div id="app">
	<c1>
		<button slot='middle'>哈哈</button>
	</c1>
</div>
<template id='temp1'>
	<div style='border:1px solid black;width:20%'>
		<slot name='left'><span>左边</span></slot>
		<slot name='middle'><span>中间</span></slot>
		<slot name='right'><span>右边</span></slot>
	</div>
</template>	
<script>
const c1={
	template:'#temp1'
};
new Vue({
  el: '#app',
  components:{
  	c1
  }
})
</script>
</body>

在这里插入图片描述

Brrby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue 插槽slot

插槽slot基本使用给插槽设置默认值具名插槽插槽是为组件空一个位置可以在需要的时候填上对应需要的标签内容基本使用<body><div id="app"> <c1></c1> <c1><a href='www.baidu.com'>我是a</a></c1> <c1><i>我出来了</i></c1> <c1><button>点击&
复制链接

扫一扫