子组件:
<div class=''>
子组件
<slot name="title" :data="msg"></slot>
</div>
父组件:通过slot-scope="scope"来获得子组件的值
<template>
<div class=''>
<slot-com>
<div slot-scope="scope" slot="title">
<button class="handleButton slot" @click="handleSlotData(scope)">在slot中获取子组件的值</button>
</div>
</slot-com>
</div>
</template>
<script>
import slotCom from '@/components/slot.vue'
export default {
components: { slotCom },
props: {},
data () {
return {
}
},
methods: {
handleSlotData (scope) {
console.log("scope", scope);
}
},
}
</script>
结果: