写在前面

对于常用的组件间传参最近有了有点小心得总结一下，主要是两种子向父组件传参的方式总结。欢迎评论区讨论

概览：

1、v-model+emit传值

说明：v-model数据双向绑定的指令。

1.1父向子传递数据

1.父组件引入子组件；
2.使用v-model绑定一个引入子组件的属性(如：num）；
3.子组件中使用defineProps接收。

1.2子向父传递数据

1.声明defineEmites；
2.在defineEmits中声明(event: 'update:num', n: number): void;
3.进行事件触发执行emit('update:num', 40)

代码示例：

// 父组件
<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>

效果图：

2、使用v-bind+emit

说明：v-bind非双向数据绑定，子组件传来的数据需要进行赋值。

2.1父向子传递数据

1.父组件引入子组件；
2.使用v-bindl绑定一个引入子组件的属性(如：num）；
3.子组件中使用defineProps接收。

2.2子向父传递数据

1.声明defineEmites；
2.在defineEmits中声明(event: 'fn', n: number): void;
3.进行事件触发执行emit('fn',num3.value)
4.父组件中@fn对应的chanNum接收参数并赋值。

代码示例：

// 父组件
<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>

效果图：

总结

1. 父向子组件传参两中方式并没有太大区别，只是在引用子组件声明属性的时候一个是v-model一个是v-bind，在接收参数的时候则完全相同。
2. 对于子组件向父组件传参则大为不同，v-model方式下父组件仅能单调的接收子组件传来的参数不能对传来的数据进行任何操作。除非单独另写逻辑进行处理。而v-bind方式下父组件在接收到子组件传来参数的同时能在声明的方法中对传来的数据和父组件本身的数据进行任意处理。

看到这里了不点个赞😋