8-5-vue组件插槽、作用域插槽

插槽

组件里的slot作用：
slot：位置、卡槽，主要用于占位置。
1、单个slot的情况，可以默认给个默认的情况，然后组件里面没有其他元素就显示默认情况；如果有其他元素就显示元素情况。
2、多个slot的情况，得区分谁是谁的问题。需要给slot名字，并且可以随意跳动位置。

插槽实质是对子组件的扩展，通过<slot>插槽-----向组件内部“指定位置”传递内容。

插槽设置的地方：一定是在子组件中。

子组件可以在任意位置添加slot。

父组件提供插槽内容。

插槽相当于一个占位符。

(1).没有内容传递过去的时候,会显示插槽的(默认)内容,

(1).有内容传递过去的时候,不会显示插槽的(默认)内容。

有句话叫一个萝卜一个坑。父组件想要在子组件中种萝卜，需要在子组件中挖个坑，<slot>就是一个【萝卜坑】。

父组件想要给子组件添加的内容就是【萝卜】。

由此可见，

萝卜种不种，种什么萝卜由父组件控制；萝卜坑在哪，由子组件控制。

换言之，插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。

slot的出现---是为了父组件可以"堂而皇之"地在子组件中--加入内容。

插槽是 在存在父子关系的组件 中使用。

同时子组件也可以给这些插槽的默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息。

我希望在这个组件中添加一点东西，我们就需要用到插槽分发内容。

slot可以放在任意位置（这个位置就是父组件添加内容的显示位置）。

slot插槽作用:父组件 向 子组件 分发内容(分发数据)。slot就是子组件里给dom元素留下的坑位。

vue的slot插槽主要分三种，默认插槽，具名插槽，作用域插槽。

例如：默认插槽

html：

<div id="app">
<child>
<h1 style="font-size:30px;color:pink;">{{title}}</h1>
</child>
</div>

<template id="child">
<div>
<p>这是一段话</p>
<slot>我是占位内容</slot>
</div>
</template>

vuejs：

<script src="js/vue.js"></script>
<script>
let Child = {
template:`#child`
}
let vm = new Vue({
el:'#app',
data:{
title:'我是可爱的吴灿'
},
components:{
Child
}
})
</script>

预览效果，如下所示：

<child>
<h1 style="font-size:30px;color:pink;">{{title}}</h1>
</child>

作用域插槽：