vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose）

vue3官方文档

• defineProps和defineEmits都是只能在中使用的编译器宏。他们不需要导入，且会随着的处理过程一同被编译掉。

• defineProps接收与props选项相同的值，defineEmits接收与emits选项相同的值。

父传子 -defineProps

父组件

我是父组件
import {ref} from 'vue'import Son from './son.vue'const ftext = ref('我是父组件-text')

子组件

我是子组件
  
接收到的值：{{ftext}}
import {ref} from 'vue'// setup 语法糖写法//defineProps 来接收组件的传值const props = defineProps({ftext: {type:String},})

子传父 – defineEmits

子组件：

我是子组件
点击给父组件传值import {ref} from 'vue'// setup 语法糖写法//用defineEmits()来定义子组件要抛出的方法,语法defineEmits(['要抛出的方法'])const emit = defineEmits(['exposeData'])const stext = ref('我是子组件的值-ftext')const toValue = ()=>{emit('exposeData',stext)}

父组件：

我是父组件