关于vue.js:Vue-组件插槽

如果咱们心愿组件标签能够像 HTML 标签一样设置内容，那么组件的应用灵便度会很高。
```
<div id="app">
<p> 示例内容 </p>
<com-a> 实力内容 2 </com-a>
</div>
```
但平时咱们书写的组件，组件首尾标签中书写的内容会被摈弃。（下面的“实力内容 2”）

咱们须要通过 <slot> 进行插槽设置。

Vue.component('com-a',{
template:`
  <div>
    <p> 示例内容 </p>
    <slot></slot> // 插槽
  </div>
`
})

自定义组件内增加内容，替换 slot 标签，一般文本和标签都可设置胜利

<div id="app">
<com-a>
  示例内容
  <span> 组件主体 </span>
</com-a>
</div>

留神：

模板内容的渲染地位
- 以后构造模板属于父组件的视图
- 外部所以内容，代码，数据都是由父组件进行模板渲染的
- 插槽是父组件给子组件设置的，数据是父组件的数据（当然也能够应用子组件数据，通过作用域插槽前面讲）
- 父级组件模板的所有内容都是在父级作用域中编译执行，子组件模板的内容在子组件作用域内编译执行
```
<div id="app">
<com-a>
这里只能拜访父组件的数据
{{parValue}}
</com-a>
</div>
```
```
new Vue({data:{ parValue:'父组件数据'},
components:{ComA}
})
```
```
var ComA={
template:`
<div>
  <p> 组件 A：{{value}}</p>
  <slot></slot>
</div>
`,
data(){
return {value:'子组件数据'}
}
}
```
插槽的作用是组件对以后子组件的内容进行便捷设置，内容由父组件进行设置

如果父组件并没有传入数据，咱们能够在 <slot> 中为插槽设置默认值，也称为后备内容。

var ComA={
template:`
  <div>
    <p> 组件 A：</p>
    <slot> 这是默认文本 </slot>  // 默认值
  </div>
`,
data(){
  return {value:'子组件数据'}
}
}

<div id="app">
<com-a></com-a>  // 插槽没接管到值，显示默认值
</div>

如果组件中有多个地位须要设置插槽, 据须要给 <slot> 设置name，称为具名插槽。

子组件构造内内设置多个插槽

Vue.component('ComA',{
  template:`
    <div>
      <header>
        <slot name="header"></slot> // 具名
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  `
})

父组件应用插槽，传入数据

template 是占位符，不显示标签
v-slot 只能在 template 中设置
未设置具名的插槽，默认为 default
默认 slot 能够简写, 所有没有被 v -slot 指定的插槽内容都被认为是默认插槽内容
具名能够简写为#header #footer
具名插槽只能调配具名对应的内容，无奈显示默认内容

个别内容比拟多的插槽局部，设置为 default 模式

<com-a>
<template v-slot:header> // 设置
  <h1> 组件头部内容 </h1>
</template>

<template v-slot:default> // 默认
  <p> 组件主体内容 </p>
</template>

<template v-slot:footer>
  <p> 组件底部内容 </p>
</template>
</com-a>

简写模式

<com-a>
<template #header>
  <h1> 组件头部内容 </h1>
</template>

<p> 组件主体内容 </p>

<template #footer>
  <p> 组件底部内容 </p>
</template>
</com-a>

插槽能够由父组件向子组件便捷内容设置，然而因为组件渲染规定，组件插槽外部只能应用父组件的数据，因为这段构造是父组件渲染的
如果心愿父组件插槽外部应用子组件数据的话，须要应用作用域插槽进行设置
作用域插槽：用于让插槽能够应用子组件的数据。

组件将须要被插槽应用的数据通过 v -bind 绑定给 <slot>，这种用于给插槽传递数据的属性称为 插槽 prop。

子组件插槽绑定

// 子组件选项对象

var ComA = {
  template:`
    <div>
      <p> 组件 A：</p>
      <slot :value="value"> 这是默认文本 </slot>
    </div>
  `,
  data(){
    return {value:"子组件数据"}
  }
}

父组件接收数据

子组件绑定数据后，父组件的插槽中须要通过 v -slot 接收数据。
接管的是蕴含所有插槽 prop 的对象（子组件能够绑定多个属性传递，都在这个对象中），能够给对象任意命名
```
<div id="app">
<com-a>
  <template v-slot:default="dataObj"> 
    {{dataObj.value}}
  </template>
</com-a>
</div>
```
如果只存在默认插槽，同时又须要接收数据，能够进行简写（非凡）
```
<div id="app">
<com-a v-slot:default="dataObj">
  {{dataObj.value}}
</com-a>
</div>
```
再次简写，留神：之前操作 v-slot 可简写成 #。然而 v-slot:default="数据" 写成#= 数据 不能够
存在 slot 名称的时候能力用 # 简化，当前情况只是接收数据，不具备名称性能

#default 和 v-slot 均可

<div id="app">
<com-a v-slot="dataObj">
  {{dataObj.value}}
</com-a>
</div>

<div id="app">
<com-a #default="dataObj">
  {{dataObj.value}}
</com-a>
</div>

还能够通过 ES6 的解构操作进行数据接管。

<div id="app">
<com-a #default="{value}">
  {{value}}
</com-a>
</div>

组件插槽

单个插槽

具名插槽

作用域插槽