defineEmit, defineExpose, defineProps valor pai-filho passando sob o açúcar sintático de configuração do Vue3
açúcar sintático de configuração
Setup é um novo gancho de ciclo de vida de vue3, que substitui beforeCreate e created de vue2. Observe que o tempo de execução de setup é antes de beforeCreate. Qualquer um que esteja familiarizado com vue2 sabe que dados e métodos não podem ser acessados durante beforeCreate. Os dados e métodos de dados e métodos que precisam ser acessados na configuração podem ser acessados na configuração chamando onBeforeMount no ciclo de vida antes da montagem.
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>
O acima são todas as tags de script escritas com a estrutura de pensamento de vue2 . A partir da versão vue3.2 , o açúcar sintático de configuração é introduzido. Não é difícil descobrir que existe uma função de gancho do ciclo de vida do vue na configuração e seu efeito é equivalente à vida externa.Função de gancho periódica, e os dados declarados na configuração precisam ser expostos por meio de retorno na configuração e, sob a sintaxe de açúcar da configuração, todo o script é a função de gancho da configuração.
Transferência de valor de componentes pai-filho sob o açúcar sintático de configuração
Na configuração do script, não há necessidade de declarar defineProps, defineEmits, defineExpose, apenas use-os diretamente, e eles serão processados e compilados junto com a configuração do script.
nó pai
<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>
nó filho
//子组件
<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>