Vue3的setup语法糖下的defineEmit、defineExpose、defineProps函数

Vue3的setup语法糖下的defineEmit、defineExpose、defineProps父子传值

setup语法糖

setup作为vue3的新增生命周期hooks，其替代了vue2的beforeCreate、created，注意setup的执行时间是位于beforeCreate之前，熟悉vue2的都知道，在beforeCreate时是无法访问data、method的数据的，如果实在需要在setup中访问data及method的数据及方法可在setup中通过调用onBeforeMount挂载前的生命周期去访问data及method的数据及方法。

export default {
  name: 'test',
  data() {
    return {
		
    }
  },
  methods: {

  },
  setup(props, ctx) {
  	const num = 1
    console.log('setup');
    onMounted(() => {
      console.log('onMounted');
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate');
    })
    return {num:num}
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
}
</script>

以上都是以vue2的思想结构去编写的script标签的，在vue3.2版本开始，引入了setup语法糖，以上不难发现在setup中有着vue生命周期的钩子函数，其效果等同于外部的生命周期的钩子函数，且在setup中需要通过return才能暴露setup中声明的数据，而在setup语法糖下，其整个script都为setup的钩子函数。

setup语法糖下的父子组件的传值

在script setup下，不用对defineProps、defineEmits、defineExpose进行声明，直接用即可，其会随着script setup 被一同处理编译。

父节点

<template>
  <Chilren :data="data" @teach="teach" ref="ChilrenRef"></Chilren>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import Chilren from './index.vue'
const ChilrenRef = ref()
const data = reactive({
  dadName: '父亲',
  age: 45
})
function teach() {
  console.log('叫我爸爸');
}
//需要等dom挂载后才能访问到dom结点
onMounted(() => {
  console.log(ChilrenRef.value.num);
})

</script>

子节点

//子组件
<template>
  <div>
    {{ prop.data.dadName }}
    {{ prop.data.age }}
  </div>
</template>
<script lang="ts" setup>
class type {
  data: Object
  data1?: Object
  isShow?: boolean
}
//对接受参数进行类型限制
interface Props {
  data: type
}
//接收父组件的数据
const prop = defineProps<Props>()
//接收父组件传的方法
const emit = defineEmits(['teach'])
//执行方法
emit('teach')
const num = ref(1)
defineExpose({
  num
})
</script>