Vue3+Ts实现父子组件间传值的两种方式

// 父组件
<template>
    <div>
        <div>
            <div> 父组件 {{ num1 }}</div>
            <button @click="add">父按钮</button>
        </div>
        <!-- v-model的传值 -->
        <Child v-model:num="num1"></Child>
    </div>
</template>
<script setup lang="ts">
import Child from './02-AppChild.vue'
import { ref } from 'vue'
let num1 = ref(20)
const add = () => {
    num1.value++
}
</script>
<style scoped></style>

//子组件
<template>
    <div>
        <div>子组件{{ num }}</div>
        <div>{{ n }}</div>
        <button @click="hdClick">按钮</button>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let props = defineProps({
    num: {
        type: Number,
        default: 100
    }
})
const emit = defineEmits<{
    // update:固定写法，后面的变量是父组件中v-model：后面的这个变量
    (event: 'update:num', n: number): void
}>()
let n = ref(props.num)
const hdClick = () => {
    // emit(上面event的值，要修改成的值)
    emit('update:num', n.value+=10)
}
</script>
<style scoped></style>

// 父组件
<template>
    <div>
        <!-- 父组件 -->
        <p>{{ num1 }}</p>
        <p>{{ num3 }}</p>
        <button @click="add">父按钮</button>
        <Child :num="num1" @fn="chanNum"></Child>
    </div>
</template>
<script setup lang="ts">
import Child from "./11-AppChild.vue";
import { ref } from "vue";
let num1 = ref(10)
let num3 = ref(0)
const chanNum = (num33:number) => {
    num3.value=num33
}
const add = () => {
    num1.value++
}
</script>
<style scoped></style>

// 子组件
<template>
    <div>
        <!-- 子组件 -->
        <p>{{ num }}</p>
        <p>{{ num3 }}</p>
        <button @click="hdClick">按钮</button>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
defineProps({
    num: {
        type: Number,
        default: 30
    }
})
let num3=ref(30)
// 子传父的时候需要先定义好emit这个方法
const emit = defineEmits<{
	//fn为父组件引入子组件是定义的子组件事件属性，可随意定义
    (event: 'fn', n: number): void
}>()
const hdClick = () => {
    // vue2通过$emit("自定义事件名"，参数)
    num3.value+=2
    emit('fn',num3.value)
}
</script>
<style scoped></style>