什么是插槽？
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
插槽的显示：
插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。
插槽分类：
- 默认插槽
<!--子组件child-->
<template>
<div>
<h3>我是默认插槽的标题</h3>
<div style="width: 100px;height: 30px;color: red">
<slot></slot>
<!--当父组件有内容时，会替换掉子组件的默认内容-->
<!--<slot>hello world</slot>-->
<!--当父组件没有内容时，会显示子组件的默认内容 hello world-->
<!--<slot>hello world</slot>-->
</div>
</div>
</template>
<!--父组件-->
<template>
<h3>这里是父组件</h3>
<!--使用组件-->
<child>
<template>
<!--当父组件有内容时，会替换掉子组件的默认内容-->
<div>我是默认插槽的具体内容</div>
<!--当父组件没有内容时，会显示子组件的默认内容 hello world-->
<!-- <div></div>-->
</template>
</child>
</template>
<script>
// 引入子组件
// 引入进来的组件的名称是刚新建的子组件的child的文件名称
import child from '../views/child'
export default {
name: "slot1",
// 注册组件
components:{ child }
}
}
</script>
注意：
- 当父组件没有内容时，会显示子组件的默认内容;
- 当父组件有内容时，会替换掉子组件的默认内容;
- 当子组件没有使用插槽(注释插槽)时，那么父组件就不会有内容显示
默认插槽
当父组件没有内容时，会显示子组件的默认内容
当子组件没有使用插槽(注释插槽)时，那么父组件就不会有内容显示
- 具名插槽(带有名字)
描述：具名插槽就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。
<!--子组件 child-->
<template>
<div>
<div class="header">
<h3>这是页头标题</h3>
<!--<slot></slot>-->
<div>
<slot name="header"></slot>
</div>
</div>
<div class="footer">
<h3>这是页尾(子组件)</h3>
<div>
<slot name="footer"></slot>
</div>
</div>
</div>
</template>
<!--父组件-->
<template>
<div>
<h3>这里是父组件</h3>
<child>
<!--父组件通过 v-slot:[name] 的方式指定到对应的插槽中-->
<template v-slot:footer>
<div>我是页尾的具体内容</div>
</template>
<template v-slot:header>
<div>我是页头的具体内容</div>
</template>
</child>
</div>
</templatd>
<script>
// 引入子组件
// 引入进来的组件的名称是刚新建的子组件的child的文件名称
import child from '../views/child'
export default {
name: "slot1",
components:{ child }
}
}
</script>
具名插槽(带有名字)
- 作用域插槽(带参数)
<!--子组件child-->
<template>
<div>
我是作用域插槽的子组件
<slot :data="user"></slot>
</div>
</template>
<script>
export default {
name: "child",
data(){
return{
user:
[
{name: 'Jack', sex: 'boy'},
{name: 'Jone', sex: 'girl'},
{name: 'Tom', sex: 'boy'}
]
}
}
}
</script>
<!--父组件-->
<template>
<div>
<h3>这里是父组件</h3>
<child>
<!--slot-scope属性，user.data就是子组件传过来的值-->
<template slot-scope="user">
<div v-for="(item,index) in user.data" :key="index">{{item}}</div>
</template>
</child>
</div>
</template>
<script>
// 引入子组件
// 引入进来的组件的名称是刚新建的子组件的child的文件名称
import child from '../views/child'
export default {
name: "slot1",
components:{ child }
}
</script>
作用域插槽(带参数)
参考：https://www.cnblogs.com/mandy-dyf/p/11528505.html
https://www.cnblogs.com/loveyt/p/9946450.html
