vue3 setup 语法糖

组件之间通信：父传子：使用defineProps

父组件：

import Student from './Student.vue'
import { ref,onMounted } from 'vue'
const schoolName = ref('xxx')

子组件

import { ref } from 'vue'
const props = defineProps({
  schoolName: {
    type: String,
    default: 'error'
  }
})

组件之间通信：子传父：使用defineEmits

在子组件中设置回调，在子组件中设置事件声明：

子组件

// 事件声明
const emit = defineEmits(['changeSchoolName'])
const changeName = (): void => {
  emit('changeSchoolName')
}

父组件

// 子传父，然后父再传给子
const changeName = (): void => {
  schoolName.value = 'good'
}

子组件暴露属性给父组件：defineExpose

子组件：