版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/TheBestAge/article/details/89302305
slot相当于是一个占位的东西,在插槽里可以放置任何内容。
slot最简单的使用方式就是在我们的子组件内使用特殊的slot元素为这个子组件开启一个slot,在父组件的模板中,插入这个子组件标签内的所有内容都将代替子组件的slot标签以及它的内容.
当父组件向子组件传值的时候,有时候,父组件传的并不是单纯的数值,字符串,有可能是带标签(DOM)的数据,所以使用slot来进行此操作
一、简单使用:
父组件内容如下:
<template>
<login>你好</login>
</template>
<script>
import login from "./login"
export default {
name: 'HelloWorld',
components:{
login,
},
}
</script>
...
子组件内容如下:
<template>
<div>
<span>欢迎登陆!</span>
</div>
</template>
运行结果如下:
在子组件中使用slot:
<template>
<div>
<slot></slot>
<span class="login">欢迎登陆!</span>
</div>
</template>
二、具名插槽:
父组件内容如下:
<templete>
<login>
<templete slot="tip">你好</templete>
<templete slot="CardNo">账号:
<input type="CardNo">
</templete>
<templete slot="password">密码:
<input type="password" >
</templete>
</login>
</templete>
子组件:
<template>
<div>
<slot name="tip"></slot>
<span>欢迎登陆!</span>
<div><slot name="CardNo"></slot></div>
<div><slot name="password"></slot></div>
</div>
</template>
效果图:
三、作用域插槽:
使用作用域插槽不仅可以在子组件中动态地放置一段html代码片段,还可以取到子组件中相应的一些值。一般情况下,我们在父组件中完成给子组件的数据传递,然后子组件进行渲染。而作用域插槽,父组件只需要提供一套样式
父组件:
<template>
<template slot-scope="props">
<ul>
<li>{{props.item}}</li>
</ul>
</template>
</login>
</template>
子组件:
<template>
<div>
<slot v-for="item of list" :item="item">
</slot>
</div>
</template>
<script>
export default {
data(){
return{
list:[1,2,3,4],
}
},
}
</script>
效果图: