Vue3 のセットアップ構文シュガーの下で渡される、defineEmit、defineExpose、defineProps の親子値
糖衣構文のセットアップ
Setup は vue3 の新しいライフ サイクル フックで、vue2 の beforeCreate と created を置き換えます。setup の実行時間は beforeCreate より前であることに注意してください。vue2 に詳しい人なら誰でも、beforeCreate 中にデータとメソッド データにアクセスできないことを知っています。セットアップでアクセスする必要があるデータのメソッドとメソッドには、マウントする前にライフサイクルで onBeforeMount を呼び出すことでセットアップでアクセスできます。
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 ライフサイクルのフック機能があり、その効果は定期的なフック関数であり、セットアップで宣言されたデータはセットアップの return を通じて公開される必要があり、セットアップの構文シュガーの下では、スクリプト全体がセットアップのフック関数です。
セットアップ構文シュガーでの親子コンポーネントの値の転送
スクリプトのセットアップでは、defineProps、defineEmits、defineExpose を宣言する必要はありません。これらを直接使用するだけで、スクリプトのセットアップとともに処理およびコンパイルされます。
親ノード
<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>