通过slot 我们可以在父组件为子组件添加内容,通过给slot命名的方式,我们可以添加不止一个位置的内容。但是我们添加的数据都是父组件内的。上面我们说过不能直接使用子组件内的数据,但是我们是否有其他的方法,让我们能够使用子组件的数据呢? 其实我们也可以使用v-slot的方式:
//子组件 : (假设名为:ebutton)
<template>
<div class= 'button'>
<button> </button>
<slot name= 'one' :value1='child1'> 这就是默认值1</slot> //绑定child1的数据
<slot :value2='child2'> 这就是默认值2 </slot> //绑定child2的数据,这里我没有命名slot
</div>
</template>
new Vue({
el:'.button',
data:{
child1:'数据1',
child2:'数据2'
}
})
//父组件:(引用子组件 ebutton)
<template>
<div class= 'app'>
<ebutton>
// 通过v-slot的语法 将插槽 one 的值赋值给slotonevalue
<template v-slot:one = 'slotonevalue'>
{{ slotonevalue.value1 }}
</template>
// 同上,由于子组件没有给slot命名,默认值就为default
<template v-slot:default = 'slottwovalue'>
{{ slottwovalue.value2 }}
</template>
</ebutton>
</div>
</template>
总结来说就是:
- 首先在子组件的slot上动态绑定一个值( :key='value')
- 然后在父组件通过v-slot : name = ‘values ’的方式将这个值赋值给 values
- 最后通过{{ values.key }}的方式获取数据