接上一篇《Vue组件化开发系统讲解》。
组件插槽的作用
组件插槽的作用是父组件向子组件传递内容，相比之前我们讨论的数据的交互，这里的内容指的是模板内容。
组建插槽的分类
普通插槽
具名插槽
作用域插槽
组件插槽的使用方法
组件插槽的位置
组建插槽的位置位于子组件的模板中，就是下面的slot标签，属于Vue的API。
- Vue.component('alert-box',{
- template:`
- <div class='demo-alert-box'>
- <strong>Error!</strong>
- <slot></slot>
- </div>
- `
- })
组件插槽的内容
插槽指定好之后，在使用组件时，通过标签终端内容传递给slot
<alert-box>Something bad happened.</alert-box>
下面演示一下。
按照上面的代码，错误提示Error之后的信息是可变的，通过插槽的方式处理，相当于预留了一个填充信息的位置，然后我们要从父组件将内容传递给插槽来填充这个信息。
运行效果如下。
slot标签中也可以写入默认内容，当父组件有内容传递过来时默认内容会被覆盖，当父组件没有内容传递过来时默认内容就会显示。
具名插槽
插槽定义
具名插槽就是有名字的插槽。
- <div class='container'>
- <header>
- <slot name='header'></slot>
- </header>
- <main>
- <slot></slot>
- </main>
- <footer>
- <slot name='footer'></slot>
- </footer>
- </div>
插槽内容
具名插槽内容由组件标签中对应内容根据插槽名称进行匹配
- <base-layout>
- <h1 slot='header'>标题</h1>
- <p>正文1</p>
- <p>正文2</p>
- <p slot='footer'>底部内容</p>
- </base-layout>
如上代码的运行结果如下。
具名插槽除了如上用法还有另外一种用法可以同时把多条文本填充到插槽中。
其中template标签起到的作用是包裹同名数据以及匹配插槽名称的作用。
作用域插槽
作用域插槽的应用场景是父组件对子组件的内容进行加工处理。
具体用一个例子来说明。
案例及本内容如下，现在要实现一项任务，让下面这个动物列表的其中一项高亮，并且这个高亮项是可切换的。
由于子组件的列表是用v-for循环出来的，所以且患高亮的操作由父组件来完成比较方便，下面就看看怎么运用作用域插槽来实现。
直观来说，作用域插槽就是可以在父组件中获取子组件的数据并且父组件可以对获取到的数据进行加工处理。获取数据的方式就是借助slot-scope属性，其获取的值来自于子组件对应插槽所绑定的自定义属性的值。
组件化开发基本内容到此结束，下篇写案例。
