以下只是学习过程中的笔记。
一、插槽slot的简单理解
对于vue中的插槽，我的理解是插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
可以动态的改变子组件内容，让子组件更具有拓展性。
二、代码示范
1.子组件插槽内容为空
代码如下（示例）：
<body
>
<div id
="app">
<cpn
></cpn
>
<!-- 在父组件中使用插槽
-->
<cpn
><span
>哈哈哈
</span
></cpn
>
<cpn
><i
>呵呵呵
</i
></cpn
>
<cpn
></cpn
>
<cpn
></cpn
>
<cpn
></cpn
>
</div
>
<template id
="cpn">
<div
>
<h2
>我是组件
</h2
>
<p
>我是组件，哈哈哈哈
</p
>
<slot
></slot
>
<!-- 子组件这里定义了一个插槽
-->
</div
>
</template
>
<script src
="vue.js"></script
>
<script
>
const app
= new
Vue({
el
:'#app',
data
:{
message
:'你好'
},
components
:{
cpn
:{
template
:'#cpn'
}
}
})
</script
>
</body
>
从以下运行结果可以看到插槽中内容在父组件使用的时候被替换了。
该处使用的url网络请求的数据。
2.子组件插槽默认值
某些情况： 如果在父组件使用组件的时候，插槽位置都是button,如果在父组件中写代码不够简洁，这时我们可以直接在子组件插槽中定义默认值。 如果在父组件中使用的时候，没有写入自定义插槽的内容，就会显示子组件默认的插槽内容；如果写入自定义插槽的内容，就会覆盖子组件默认插槽的内容，如果父组件中写入多个元素，默认值将被替换为自定义的多个元素。
代码如下：
<body
>
<div id
="app">
<!-- 在父组件中使用插槽
-->
<cpn
><span
>一个元素会被替换
</span
></cpn
> <!--这里会覆盖子组件中插槽默认内容
-->
<cpn
>
<span
>多个元素也会被替换
</span
>
<i
>呵呵呵
</i
>
<div
>我是div元素
</div
>
<p
>我是p元素
</p
>
</cpn
>
<cpn
></cpn
> <!--显示默认
-->
<cpn
></cpn
>
</div
>
<template id
="cpn">
<div
>
<h2
>我是组件
</h2
>
<p
>我是组件，哈哈哈哈
</p
>
<slot
><button
>按钮
</button
></slot
>
<!-- 子组件这里定义了一个插槽，默认内容是一个按钮
-->
</div
>
</template
>
<script src
="vue.js"></script
>
<script
>
const app
= new
Vue({
el
:'#app',
data
:{
message
:'你好'
},
components
:{
cpn
:{
template
:'#cpn'
}
}
})
</script
>
</body
>
运行结果：
