vue3+ts实现父子组件传值
用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 里面写就好。
依然可以接收到,这种写法会更优雅。
应该讲的蛮清楚了吧,感觉有用的话,点个赞吧🌹
结束啦🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈
更多推荐
所有评论(0)