1.插槽的基本使用
子组件中的设置插槽slot:子组件中由一个默认的元素:h2,和一个插槽:插槽中是个按钮
.插槽的默认值 <slot>button</slot>如果组件中没有自定义元素时,使用插槽的默认值
.如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素(替换插槽中的元素,原有定义的元素还在)
<template id="cpn"> <div> <h2>默认h2</h2> <slot><button>默认值</button></slot> </div> </template>
父组件中使用子组件:(一共使用的四次子组件--插槽)
<div id="app"> <cpn></cpn> <cpn><span>哈哈哈</span></cpn> <cpn><i>呵呵呵</i></cpn> <cpn> <i>呵呵呵</i> <div>我是div元素</div> <p>我是p元素</p> </cpn> <cpn></cpn> </div>
页面显示如下:
2.具名插槽的使用:就是根据子组件中插槽的名称去改想要的内容
子组件中的3个插槽:
<template id="cpn"> <div> <slot name="left"><span>左边</span></slot> <slot name="center"><span>中间</span></slot> <slot name="right"><span>右边</span></slot> </div> </template>
负组件中调用子组件--插槽
<div id="app"> <cpn></cpn> <!-- 将子组件插槽名字为“center"的内容改为”标题“ --> <cpn><span slot="center">标题</span></cpn> <!-- 将子组件插槽名字为“left"的内容改为”标题“ --> <cpn><span slot="left">标题</span></cpn> </div>
3.作用域插槽的使用
子组件:
<template id="cpn"> <div> <!-- 将子组件中的数据传递到slot --> <slot :data='pLanguage'> <ul> <li v-for="item in pLanguage">{{item}}</li> </ul> </slot> </div> </template>
父组件:
const app = new Vue({
el:'#app',
data:{
message:'你好啊',
},
components:{
cpn:{
template:'#cpn',
data(){
return {
pLanguage:['javascript','python','Go','java','C#']
}
}
}
}
})
<div id="app"> <cpn></cpn> <cpn> <!-- 目的是获取子组件中的pLanguage --> <template slot-scope="slot"> <!-- <span v-for="item in slot.data">{{item}} - </span> --> <span>{{slot.data.join(' - ')}}</span> </template> </cpn> <cpn> <!-- 目的是获取子组件中的pLanguage --> <template slot-scope="slot"> <!-- <span v-for="item in slot.data">{{item}} - </span> --> <span>{{slot.data.join(' * ')}}</span> </template> </cpn> </div>