在slot中获取子组件的值

446 阅读1分钟

子组件:

<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>

结果:

image.png

image.png