vue3+ts实现父子组件传值

在vue3中的父子组件相互传参很简单，下面将举几个简单的小例子来讲述参数在父子组件之间如何传递，以及一些传参细节。

一、父传子

父组件代码：

<template>
   <son :title = "fatherToSon" ></son>
</template>

<script setup lang="ts">

import son from "./son.vue" //导入子组件
let  fatherToSon = "父---->子"
</script>

将子组件：son.vue引入父组件，在组件内通过v-bind（就是‘:’）绑定想要传给子组件的参数

子组件代码：

<template>
    <div>子组件</div>
    <div>{{title}}</div>
</template>
<script setup lang="ts">
// import {ref,reactive} from 'vue'
defineProps({
    title:{
        type:String,
        default:"我是默认值"
    }
})

</script>

用defineProps接收父组件传过来的函数，没用ts形式接收的话defineProps就是一个函数，可用来接收子组件传来的参数title，里面type指定title的类型，当子组件不传值时，会展示default值：‘我是默认值’，title也可以直接作为参数调用。

展示运行结果：

但需要注意的是，这种写法的参数是不可以直接在代码中使用的，比如你想直接打印 title，会报错：

对于上面的情况，可以接受一个props来获取被传值：

上面的写法均为非ts写法，我们可以使用ts中泛型自变量的写法，来使其变得更加优雅简洁，顾名思义就是用defineProps来指定接受一个泛型数据，可包含父组件传来的各种参数，数组也可以。例如：
在父组件中添加数组参数：

<template>
   <son :arr="['迪迦','戴拿','雷欧']" :title = "fatherToSon" ></son>
</template>

<script setup lang="ts">

import son from "./son.vue" //导入子组件
let  fatherToSon = "父---->子"
</script>

子组件接收：

<template>
    <div>子组件</div>
    <div>{{ title }}</div>
    <div>{{ arr }}</div>
</template>
<script setup lang="ts">

defineProps<{
    title: String,
    arr:String[]
}>()

</script>

展示在结果页面上：

如果父组件没传的参数，比如没传arr数组，我们在子组件中接收，可以使用ts特有的一个默认值定义函数：withDefaults。例：

<template>
    <div>子组件</div>
    <div>{{ title }}</div>
    <div>{{ arr }}</div>
</template>
<script setup lang="ts">

withDefaults(defineProps<{
    title: String,
    arr:String[]
}>(),{
    arr:()=>['我是默认的奥特曼']
})
</script>

结果：

二、子传父

给父组件传值，需要传一个事件，同时使用defineEmits 用来派发参数：

<template>
    <div>子组件</div>
    <button @click="send">子传父按钮</button>
</template>
<script setup lang="ts">

// const emit = defineEmits (["on-click"])
const emit = defineEmits<{
    (e:"on-click",name:string):void
}>()
const send = ()=>{
    emit('on-click','拉顿')
}
</script>

在父组件中接收：

<template>
   <son  @on-click="getMonster"  ></son>
</template>

<script setup lang="ts">

import son from "./son.vue" //导入子组件

const getMonster = (name:String) => 
console.log('子传父接收到的怪兽======>',name)

</script>

点击按钮，打印结果：

以上为非ts写法，我们来尝试另一种ts写法：

<template>
    <div>子组件</div>
    <button @click="send">子传父按钮</button>
</template>
<script setup lang="ts">

// const emit = defineEmits (["on-click"])
const emit = defineEmits<{
    (e:"on-click",name:string):void
}>()
const send = ()=>{
    emit('on-click','拉顿')
}
</script>

可以看到，我们用defineEmits 定义泛型，穿了一个方法：on-click，方法有个参数叫name，且没用返回值。当然，可以定义多个方法，并有返回值，defineEmits 里面写就好。

依然可以接收到，这种写法会更优雅。

应该讲的蛮清楚了吧，感觉有用的话，点个赞吧🌹
结束啦🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈