slot插槽见名知意 就是把想要写的东西做一个容器出来然后写进去
组件写在components文件夹下面,
我的插槽组件名为 slottest.vue.
<templater>
<div>
<div><h1>插槽组件</h1></div>
<slot></slot>
<!--
slot标签就可以在组件引入页面后的标签里面写东西
如果没有这个slot标签那么在页面引入的组件标签里面写再多的东西都不会显示
-->
<div>在页面引入的组件标签里面写东西想要改变东西的位置可以使用name属性</div>
<slot name="footer"></slot>
<!-- 使用方法 假设我的组件标签为 slottest
<slottest>
<p slot="footer"> 这里写东西位置就在组件的
<slot name="footer"></slot>
这个标签的位置
</p>
</slottest>
-->
</div>
</templater>
使用组件页面
<template>
<div>
<div>slot插槽-----就是使用slot组件在不同的div中插入类容</div>
<slottest>
<p>123</p>
<p slot="footer">123</p> <!--通过slot的name属性来决定它在插件中的位置-->
</slottest>
</div>
</template>
<script>
//引入组件slot 插槽
import slottest from '../../components/slottest.vue'
export default {
data(){
return{
}
},
components:{
slottest
//注册主键
}
}
</script>