Vue 插槽的介绍与使用
插槽
- 组件的插槽是为了让我们封装的组件更加具有扩展性。
- 让使用者可以决定组件内部的一些内容到底展示什么。
- 例子：
- 移动网页中的导航栏：
- 移动开发中，几乎每个页面都有导航栏。
- 导航栏我们必然会封装成一个插件，比如 nav-bar 组件。
- 一旦有了这个组件，我们就可以在多个页面中复用了。
如何封装这类组件呢？slot
- 如何去封装这类的组件呢？
- 他们有很多区别，但是也有很多共性。
- 如果每一个单独封装一个组件，显然不合适，比如每个页面都返回，这部分内容我们就要重复去封装。
- 但是如果封装成一个，也不合理：有些左面是菜单，有些是返回，有些中间是搜索，有些是文字等等。
- 如何封装合适呢？抽取共性，保留不同。
- 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
- 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。
- 是搜索框，还是文字，还是菜单，由调用者自己来决定。
- 这就是为什么我们要学习组件中的插槽 slot 的原因。
slot 基本使用
- 在子组件中，使用特殊元素就可以为子组件开启一个插槽。
- 该插槽插入什么内容取决于父组件如何使用。
- 中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容。
- 插槽的使用方法：
<div id="app"> <my-cpn> <h2> 我是替换插槽的内容 </h2> <p> 我也是替换插槽的内容 </p> </my-cpn> </div> <template id="myCpn"> <div> <slot>我是插槽中的默认内容</slot> </div> </template> <script> Vue.component('my-cpn',{ template:'#myCpn' }) let app = new Vue({ el: '#app' }) </script>
具名插槽
- 当子组件的功能复杂时，子组件的插槽可能并非是一个。
- 比如封装一个导航栏的子组件，就需要三个插槽，分别代表左边、中间、右边。
- 那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
- 这个时候，就需要给插槽起一个名字。
- 如何使用具名插槽呢？
- 非常简单，只要给 slot 元素一个 name 属性即可。
<div> <!-- 没有传入任何内容 --> <my-cpn></my-cpn> <!-- 传入某一个内容 --> <my-cpn> <span slot="left"></span> </my-cpn> <!-- 传入所有的内容 --> <my-cpn> <span slot="left">我是返回</span> <span slot="center">我是标题</span> <span slot="right">我是菜单</span> </my-cpn> </div> <template id="myCpn"> <div> <slot name="left">我是左侧</slot> <slot name="center">我是中间</slot> <slot name="right">我是右侧</slot> </div> </template> <script> Vue.component('my-cpn',{ template: '#myCpn' }) let app = new Vue({ el: '#app' }) </script>
作用域插槽
编译作用域
- 在学习插槽以前，先理解一个概念：编译作用域。
- 官方对于编译的作用域解析比较简单。
<div id="app"> <cpn v-show="isShow"></cpn> </div> <template id="cpn"> <div> <h2>我是组件标题</h2> <p>哈哈哈</p> </div> </template> <script src="../Vuecode/Vue.min.js"></script> <script> const app = new Vue({ el: '#app', data: { isShow: true }, components: { cpn: { template: '#cpn', data() { return { isShow: false } } } } }) </script>
- 下面的代码是否可以被渲染出来？
- 中，使用了 isShow 属性。
- isShow 属性即包含在组件中，又包含在 Vue 实例中。
答案：最终是可以渲染出来的，也就是使用的是 Vue 实例的属性。
- 为什么呢？
- 官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
- 而我们在使用的时候，整个组建的使用过程是相当于在父组件中出现的。
- 那么他的作用域就是父组件，使用的属性也是属于父组件的属性。
- 因此，isShow 使用的是 Vue 实例的属性，而不是子组件的属性。
作用域插槽：准备
- 父组件替换插槽的标签，但是内容由子组件来提供。
- 先来提一个需求：
- 子组件中包括一组数据，比如：pLanguages:['JavaScript','Python','Swift','Go','C++']。
- 需要在多个界面进行展示。
- 某些界面是以水平方向——展示的。
- 某些界面是以列表形式展示的。
- 某些界面直接展示一个数组。
- 内容在子组件，怎么让父组件进行展示？
- 利用 slot 作用域插槽就可以了。
作用域插槽的使用
<div id="app"> <cpn></cpn> <cpn> <template slot-scope="slot"> <span>{{slot.data.join(' - ')}}</span> </template> </cpn> <cpn> <template slot-scope="slot"> <span>{{slot.data.join(' * ')}}</span> </template> </cpn> </div> <template id="cpn"> <div> <slot :data="pLanguages"> <ul> <li v-for="item in pLanguages">{{item}}</li> </ul> </slot> </div> </template> <script> const app = new Vue({ el: '#app', data: { isShow: true }, components: { cpn: { template: '#cpn', data() { return { pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++'] } } } } }) </script>
