Vue の 插槽
1.为什么要用插槽
- usb等插槽的目的是让我们原来的设备，具有更多的扩展性。
- 同样的，组件的插槽，也是为了我们封装的组件更加具有扩展性，让使用者可以决定组件的内部到底展示什么
比如说，如下的需求：
当模板复用的时候。我第一次用的时候，下边想让他显示一个按钮，第二次用的时候，想让他显示一个 p 标签，所以，这种情况下。我们就把最后一行，给他搞成活的，这样，我们就灵活的使用组件进行开发了。
2.插槽的基本使用
其实也简单，只要添加一个 slot 标签就可以了
<template>
<div>
<h1>我是标题</h1>
<p>我是组件。哈哈哈</p>
<slot></slot>
</div>
</template>
使用插槽的时候，直接把标签写在里面就好了
<body>
<!-- 父组件模板 -->
<div id='app'>
<!-- 插槽的东西直接放在中间就可以了 -->
<cpn><button>点击按钮</button></cpn>
<cpn>
<p>你好吗？</p>
</cpn>
<cpn></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn">
<div>
<h1>我是标题</h1>
<p>你好</p>
<slot></slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 子组件
const cpn = {
template: '#cpn',
}
// 父组件
const app = new Vue({
el: '#app',
data: {
},
components: {
// 当组件的原名和要命的名重合，就可以这样简写
cpn
}
})
</script>
</body>
效果图：
为了避免插槽里面的东西多有重复，可以给插槽设置默认值
<template id="cpn">
<div>
<h1>我是标题</h1>
<p>你好</p>
<slot><h2>设置的默认值</h2></slot>
</div>
</template>
3.具名插槽
当有多个组件的插槽的时候，具体应该更换哪一个插槽！
<body>
<!-- 父组件模板 -->
<div id='app'>
<cpn><span slot="center">标题</span></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn">
<div>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 子组件
const cpn = {
template: '#cpn',
}
// 父组件
const app = new Vue({
el: '#app',
data: {
},
components: {
// 当组件的原名和要命的名重合，就可以这样简写
cpn
}
})
</script>
</body>
