vue3-composition API 父子通讯

father.vue

<template>
	<son @changeFold="changeFold" /></son>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

import navHeader from '@/components/son.vue'

export default defineComponent({
  components: { navHeader, son},
  setup() {
    const isCollapse = ref(false)
    const changeFold = (isFold: boolean) => {
      isCollapse.value = isFold
    }
    return { isCollapse, changeFold }
  }
})
</script>

son.vue

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  emits: ['changeFold'],
  setup(props, { emit }) {
    const isFold = ref(false)
    const panlFold = () => {
      isFold.value = !isFold.value
      emit('changeFold', isFold.value)
    }

    return { isFold, panlFold }
  }
})
</script>