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>