1.插槽的基本使用
<div id="app">
<cpn><button>按钮</button></cpn>
</div>
//定义一个组件
<template id="cpn">
<div>
<h2>我是组件</h2>
<p>我是内容</p>
<slot></slot>
</div>
</template>
const vm = new Vue({
el: '#app',
//注册组件
components: {
cpn: {
template: '#cpn'
}
}
});
2.插槽的默认值
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件</h2>
<p>我是内容</p>
<slot><span>我是默认值</span></slot>
</div>
</template>
const vm = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn'
}
}
});
3.多个值同时放入到组件进行替换时,一起作为替换元素
<div id="app">
<cpn>
<p>替换1</p>
<i>替换2</i>
</cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件</h2>
<p>我是内容</p>
<slot><button>按钮</button></slot>
</div>
</template>
const vm = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn'
}
}
});
4.具名插槽的使用
通过给插槽设置name属性准确找到需要替换的插槽
<div id="app">
<cpn><span slot="center">标题</span></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>
const vm = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn'
}
}
});
5.作用域插槽
在父组件中无法访问到子组件中的数据,需要展示的数据还是子组件中的数据,但是展示的方式不同;通过设置slot-scope属性可以获取到子组件模板插槽中绑定的数据。
<div id="app">
<cpn>
<!-- 获取子组件中的数据 -->
<!-- vue2.5.x版本以下必须用template包裹 版本以上用div也可以 -->
<div slot-scope="slot">
<span v-for="item in slot.num">{{item}}- </span>
</div>
</cpn>
</div>
<template id="cpn">
<div>
<slot :num="numArr">
<ul>
<li v-for="item in numArr">{{item}}</li>
</ul>
</slot>
</div>
</template>
const vm = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn',
data() {
return {
numArr: [1,2,3,4,5,6,7]
}
}
}
}
});