核心内容:
v-solt , v-bind , $slots , $scopedSlots , $attrs , $listeners
一,基础用法。
//子组件
<div>
<slot></slot>
</div>
......
//父组件
<div>
<children>
<h1>hello wolrld</h1>
</children>
</div>
//hello world 将会放到子组件中进行渲染
二,名命插槽+传值
//子组件
<div>
<slot name="one" :random='slotParam'></slot>
<slot name="two" v-bind='slotParam'></slot>
<slot v-bind='slotParam'></slot>
</div>
<script>
export default {
data() {
return {
slotParam:{name:'米老鼠'}
};
},
};
</script>
//slot 不写name默认name='default'
......
//父组件
// "#" 是v-slot:的语法糖
<div>
<children>
<template #one={random:{name}}> ---{{name}}---</template>
<template #two={name}> ---{{name}}---</template>
<div #default={name}>{{name}}</div>
//default也可以这样写
<div v-slot={name}>{{name}}</div>
</children>
</div>
//name都将渲染为‘米老鼠’
三,扩展
1,$slot,$scopedSlots.
//$slot :非作用域插槽集合。
//$scopedSlots:作用域插槽集合。
//子组件
<div>
<p v-for='(item,index) in Object.keys($scopedSlots)'>
<slot :name="key" v-bind="scope"></slot>
</p>
</div>
<script>
export default {
data() {
return {
slotParam:{name:'米老鼠'}
}
},
mounted(){ console.log(this.$slot,this.$scopedSlot)}
//$slot:下例调用使用了#one,#default,打印如下。
//{two:obj}
//$scopedSlot !!!(scopedSlot的信息===父组件的使用数量)
//{one:fun,two:fun,default:fun}
};
</script>
//父组件 -------------------------------------------------
<div>
<finner>
<template #one="{ name}"> {{ one }} </template>
<template #two> two </template>
<template #three="{ name}">{{ name }} </template>
</finner>
</div>
2,$attrs,$listeners.
//$attrs:包含了父作用域中, attribute 绑定 (class 和 style 除外)的值,
//且props接收中的值,也不包含其中。(通过 v-bind="$attrs" 传入内部组件)。
//$listeners:父作用域中的事件监听器,通过 v-on="$listeners" 传入内部组件。
//父组件
<div>
<Componenst :aaa="aaa" :bbb="bbb" @handOne="handOne" @handTwo="handTwo" />
</div>
...
data(){
return {
aaa:111,
bbb:222
}
},
method:{
handOne(){},
handTwo(){console.log('触发了')}
}
...
//子组件
<div>
<componenst-child v-bind="$attrs" v-on="$listeners"/>
</div>
...
props{
aaa:'这里props接收了'
},
...
//子组件
<div>
<componenst-sun @click='$listeners.handOne'/>
</div>
...
mounted(){
console.log(this.$attrs,this.$listeners)
//{bbb:222} (因子组件props内有aaa,所以aaa被$attrs剔除)
//{handOne(){},handTwo(){}}
},
...
以上内容仔细研究一下,slot插槽是非常重要的核心内容,多用多练即可。