defineEmit, defineExpose, defineProps parent-child value passing under Vue3's setup syntactic sugar
setup syntactic sugar
Setup is a new life cycle hooks of vue3, which replaces beforeCreate and created of vue2. Note that the execution time of setup is before beforeCreate. Anyone who is familiar with vue2 knows that data and method data cannot be accessed during beforeCreate. The data and methods of data and method that need to be accessed in the setup can be accessed in the setup by calling onBeforeMount in the life cycle before mounting.
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>
All of the above are script tags written with the thought structure of vue2 . Starting from vue3.2 version , setup syntactic sugar is introduced. It is not difficult to find that there is a hook function of vue life cycle in setup, and its effect is equivalent to external life. Periodic hook function, and the data declared in the setup needs to be exposed through return in the setup, and under the syntax sugar of the setup, the entire script is the hook function of the setup.
Value transfer of parent-child components under setup syntactic sugar
Under the script setup, there is no need to declare defineProps, defineEmits, defineExpose, just use them directly, and they will be processed and compiled together with the script setup.
parent node
<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>
child node
//子组件
<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>