slot的根本应用
- 组件的插槽是为了让封装的组件更加具备扩展性
- 让使用者能够决定组件外部的一些内容到底展现什么
如何去封装这类的组件 应用slot
- 如果每一个独自去封装一个组件，显然不适合；比方每个页面都返回，这部分就要反复封装
- 然而，如果封装成一个，也不合理，有些左侧是菜单，有些是返回等等
如何封装适合
- 抽取共性，保留不同
- 最好的封装形式就是将共性抽取到组件中，将不同裸露为插槽
- 一旦咱们预留了插槽，就能够让使用者依据本人的需要，决定插槽中插入什么内容
- 插槽的根本应用<slot></slot>
- 插槽的默认值<slot><button></button></slot>
如果有多个值，同时放入到组件进行替换时，一起作为替换元素
<div id="app"> <cpn><button>按钮</button></cpn> <cpn><span>哈哈啊哈</span></cpn> <cpn><i>呵呵呵</i></cpn> <cpn></cpn> </div> <template id="cpn"> <div> <h2>我是组件</h2> <p>hhhhh</p> <slot></slot> <!-- <slot><button></button></slot> //如果应用多btn给插槽默认值button --> </div> </template> <script> var app = new Vue({ el: '#app', components: { cpn: { template: '#cpn' } } }) </script>
具名插槽的应用
给slot id 更易使用 辨别插槽
<div id="app"> <cpn><span slot="center">题目</span></cpn> <cpn><button slot="left">返回</button></cpn> </div> <template id="cpn"> <div> <slot name="left"><span>右边</span></slot> <slot name="center"><span>两头</span></slot> <slot name="right"><span>左边</span></slot> </div> </template> <script> var app = new Vue({ el: '#app', components: { cpn: { template: '#cpn' } } }) </script> 作用域插槽
编译作用域
- 咱们通过例子了解这个概念
- 首先思考上面的代码是否能够渲染进去
* <cpn v-show="isShow"></cpn> 中，咱们应用了isShow属性
* isShow属性蕴含在组件中，也蕴含在Vue实例中
* 能够渲染进去
* 官网给了一条准则：父组件模板的所有货色都会在父级作用域内编译，子组件模板的所有货色都会在子级作用域内编译。
* 而咱们应用<cpn v-show="isShow"></cpn>时候，整个组件的应用过程相当于在父组件中呈现的
* 那么他的作用域就是父组件，应用的属性也是属于父组件的属性
* 因而，isShow应用的是Vue实例中的属性，而不是子组件的属性
<div id="app"> <cpn v-show="isShow"></cpn> </div> <template id="cpn"> <div> <h2>我是子组件</h2> <p>我是子组件哈哈哈</p> </div> </template> <script> var app = new Vue({ el: '#app', data: { isShow: true }, components: { cpn: { template: '#cpn', data() { isShow: false } } } }) </script> 作用域-插槽
* 作用域插槽是slot一个比拟难了解的点
* 这里，咱们用一句话对其做一个总结
* 父组件替换插槽的标签，然而内容由子组件来提供
<div id="app"> <cpn></cpn> <cpn> <!-- 目标是获取子组件中的names 2.5.x以下 须要template模板，以上不必--> <template slot-scope="slot"> <span v-for="item in slot.data">{{item}}-</span> </template> </cpn> <cpn> <template slot-scope="slot"> <span>{{slot.data.join('*')}}</span> </template> </cpn></div><template id="cpn"> <div> <slot :data="names"> <ul> <li v-for="item in names">{{item}}</li> </ul> </slot> </div></template><script> var app = new Vue({ el: '#app', data: {}, components: { cpn: { template: '#cpn', data() { return { names: ['TOM', 'JENY', 'BOB', 'DAD'] } } } } })</script>