插槽也是用于vue间创建的数据的一种方式,一般都是传递html元素。比如可以用于定义一个带样式的title等
- 默认插槽:没有name的插槽
----父组件------
<template>
<div>
<TypeCom>
<!-- 如果这里的注释放开,那么子组件中默认的i标签就会被覆盖 -->
<!-- <span>这是新加的</span> -->
</TypeCom>
</div>
</template>
-----子组件-----
<template>
<div>
<p>这是本来就有的</p>
<slot>
<i>如果在用此组件的地方没有传递html,则显示默认的</i>
</slot>
</div>
</template>
- 具名插槽:顾名思义,有名字的插槽。用于多个插槽的地方
-----子组件-----
<template>
<div>
<p>这是本来就有的</p>
<slot name="title">
<i>如果在用此组件的地方没有传递html,则显示默认的</i>
</slot>
<slot name="content">
这是默认的内容
</slot>
</div>
</template>
-----父组件-----
<template>
<div>
<TypeCom>
<template slot="title">
新的title
</template>
<!-- 直接写slot=""和v-slot:是一样的,v-slot语法是2.6.0以后的 -->
<template v-slot:content>
<div>这是新的content</div>
</template>
</TypeCom>
</div>
</template>
- 作用域插槽:一般是用来父组件要根据子组件的值做显示。假如在子组件里有有一些数据,父组件要拿到这些数据,做不同的处理
---子组件----
<template>
<div>
<p>这是本来就有的</p>
<slot name="title" :arrData1="arr">
<i>如果在用此组件的地方没有传递html,则显示默认的</i>
</slot>
<slot name="content" :arrData2="arr">
这是默认的内容
</slot>
</div>
</template>
<script>
export default {
data() {
return {
arr: ['小明', '小红', '小李', '小文']
}
}
}
</script>
-----父组件------
<template>
<div>
<TypeCom>
<template slot="title" slot-scope="data1">
<h4 v-for="item in data1.arrData1" :key="item">{{ item }}--title</h4>
</template>
<template #content="data2">
<!--<template v-slot:content="data2"> 等同于上面写法,上面是2.6.0后的新语法,这三种写法都可以 -->
<!-- 等同于 <template #content="{arrData2}">,拿到arrData2之后,进行结构-->
<ul v-for="con in data2.arrData2" :key="con">
<li>{{ con }}---content</li>
</ul>
</template>
</TypeCom>
</div>
</template>