首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3+Ts父子组件间传值

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

2023-09-06 10:22:32 作者：sKK07

这篇文章主要给大家介绍了基于Vue3+Ts实现父子组件间传值的两种方式,使用v-model+emit传值和使用v-bind+emit传值两种方式,文章通过代码示例介绍的非常详细,感兴趣的同学可以参考阅读

概览：

方式	特点
`v-model + emit`	简单明了，无复杂操作时使用
`v-bind + emit`	功能齐全，使用麻烦，推荐数据处理较多时使用

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接收参数并赋值。