[toc]
slot是什么
- slot翻译为插槽:
- 在生活中很多地方都有插槽,电脑的USB插槽,插板当中的电源插槽。
- 插槽的目的是让我们原来的设备具备更多的扩展性。
- 比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。
- 组件的插槽:
- 组件的插槽也是为了让我们封装的组件更加具有扩展性。
- 让使用者可以决定组件内部的一些内容到底展示什么。
- 例子:移动网站中的导航栏。
- 移动开发中,几乎每个页面都有导航栏。
- 导航栏我们必然会封装成一个插件,比如nav-bar组件。
- 一旦有了这个组件,我们就可以在多个页面中复用了。
slot基本使用
在template模板中使用<slot></slot>
来使用插槽
具名插槽slot
- 当子组件的功能复杂时,子组件的插槽可能并非是一个。
- 比如我们封装一个导航栏的子组件,可能就需要三个插槽,分别代表左边、中间、右边。
- 那么,外面在给插槽插入内容时,如何区分插入的是哪一个呢?
- 这个时候,我们就需要给插槽起一个名字
- 如何使用具名插槽呢?
- 非常简单,只要给slot元素一个name属性即可
<slot name='myslot'></slot>
- 非常简单,只要给slot元素一个name属性即可
作用域插槽
==父组件替换插槽的标签,但是内容由子组件来提供。==
插槽使用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h3>使用默认插槽的值</h3>
<cpn></cpn>
<h3>修改name为left的插槽</h3>
<cpn>
<button slot="left">返回</button>
</cpn>
<h3>自定义全部插槽的值</h3>
<cpn>
<button slot="left">返回</button>
<sapn slot="centre">我是中间的搜索框</sapn>
<button slot="right">右侧</button>
</cpn>
<p>------------------------------------------------------------------------------------------------------------------</p>
<h2>概念: 父组件替换插槽的标签,但是内容由子组件来提供</h2>
<h3>使用模板默认标签</h3>
<cpn2></cpn2>
<h3>修改模板中的标签</h3>
<cpn2>
<!--这里的template也可以写成div, slot-scope是固定语法,目的是引用(绑定)slot对象, -->
<template slot-scope="slot">
<!--slot.data中的data是引用模板中:data, 而:data和模板中的pLanguages是绑定的,所以访问slot.data就可以访问到模板中的pLanguages-->
<!--通过for循环对列表进行遍历,通过-分割,但是最后的地方也会多出一个- -->
<span v-for="item in slot.data">{{item}}-</span>
<br>
<!--通过.join函数对列表中的元素进行拼接,分隔符是 * -->
<span>{{slot.data.join(' * ')}}</span>
</template>
</cpn2>
</div>
<template id="cpn">
<div>
<!--包含name属性的插槽,叫做具名插槽-->
<slot name="left"><span>左侧</span></slot>
<slot name="centre"><span>中间</span></slot>
<slot name="right"><span>右侧</span></slot>
</div>
</template>
<template id="cpn2">
<div>
<!--data名称是自定义的,可以修改为其他的任意值, pLanguages表示从组件中拿到的数据, 相当于pLanguages和data进行绑定-->
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../../js/vue.v2.6.12.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'baiyongjie'
},
components: {
cpn: {
template: "#cpn",
},
cpn2: {
template: "#cpn2",
data() {
return {
pLanguages: ['python', 'javaScript', 'Golang', 'vue']
}
}
}
}
})
</script>
</body>
</html>