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

子组件：

// 子组件中暴露属性，可以在父组件中通过ref来访问到
const studentName = ref('tom')
defineExpose({
  studentName,
  obj: {
    name: 'paul',
    age: 23
  }
})

父组件：

const studentRef = ref()
// 使用子组件的属性
onMounted(()=>{
  console.log(studentRef.value.studentName)
  console.log(studentRef.value.obj)
})

全部代码：

子组件：

父组件：