傑森前端

稍微看了一下其實vue3與vue2的事件與參數傳遞感覺差不多。

多了一個emit的配置項目可以清楚知道哪些事件被傳下來。

slot感覺沒什麼差別。

setup裡面的兩個參數可以獲取props和context包含(emit,attrs,slots,expose)。

範例

父組件

<script >
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  components: {
    HelloWorld
  },
  setup() {
    function test(){
      console.log('test')
    }
    return {
      test
    }
  }
}
</script>

<template>
  <HelloWorld msg="msg2" @test="test">
    <template #>default</template>
    <template #test>test</template>
  </HelloWorld>
</template>

子組件

<script >
export default {
  props: {
    msg: {
      type: String,
      default: ''
    }
  },
  emit: ['test'],
  setup(props, context) {
    console.log(context)
    return {
      emit: context.emit,
    }
  }
}


</script>

<template>
  <h1>{{ msg }}</h1>
  <button @click="emit('test')">click</button>
  <br />
  <slot></slot>
  <br />
  <slot name="test"></slot>
</template>