父子间传值"/>
vue3中的父子间传值
一、父传子 defineProps
父组件传值给子组件主要是由父组件为子组件通过v-bind绑定数值,而后传给子组件;子组件则通过defineProps接收使用。
<template><div class="fa"><div style="margin: 10px;">我是父组件</div><Son :fatherMessage="fatherMessage"></Son></div>
</template><script setup lang="ts">
import Son from './Son.vue'
import {ref} from "vue";const fatherMessage = ref<string>("我是父组件传过来的值")</script><style scoped>
.fa{border: 3px solid cornflowerblue;width: 400px;text-align: center;
}
</style>
如下为子组件
<template><div style="margin: 10px;border: 2px solid red">我是子组件<div style="margin: 5px;border: 2px solid gold">父组件传值接收区:{{fatherMessage}}</div></div>
</template><script setup lang="ts">
interface Props {fatherMessage?: string,
}
defineProps<Props>()</script>
父组件Father.vue
中在调用Son.vue
这个子组件时,使用v-bind
绑定参数fatherMessage
,并传给Son.vue
子组件Son.vue
使用defineProps
接收fatherMessage
这个参数,而后就可以正常使用该参数。
二、子传父 defineEmits
子组件传值给父组件主要是子组件通过defineEmits
注册一个自定义事件,而后触发emit
去调用该自定义事件,并传递参数给父组件。
在父组件中调用子组件时,通过v-on
绑定一个函数,通过该函数获取传过来的值。
如下为子组件
<template><div style="margin: 10px;border: 2px solid red">我是子组件<button @click="transValue" style="margin: 5px">传值给父组件</button></div>
</template><script setup lang="ts">
import {ref} from "vue";// 定义所要传给父组件的值
const value = ref<String>("我是子组件传给父组件的值")// 使用defineEmits注册一个自定义事件
const emit = defineEmits(["getValue"])// 点击事件触发emit,去调用我们注册的自定义事件getValue,并传递value参数至父组件
const transValue = () => {emit("getValue", value.value)
}</script>
父组件Father.vue中在调用Son.vue这个子组件时,当子组件Son.vue需要传参给父组件Father.vue时,使用defineEmits注册一个事件getValue,而后设置点击事件transValue去触发emit,去调用我们注册的自定义事件getValue,并传递value参数至父组件。
父组件Father.vue在获取子组件Son.vue传过来的值时,通过在子组件上使用v-on设置响应函数getValue(该函数与子组件中的注册自定义事件getValue名称需一致),并绑定一个函数getSonValue来获取传过来的值。
三、子组件暴露属性给父组件 defineExpose
当父组件想直接调用父组件的属性或者方法时,子组件可以使用defineExpose
暴露自身的属性或者方法,父组件中使用ref
调用子组件暴露的属性或方法。
如下为子组件
<template><div style="margin: 10px;border: 2px solid red">我是子组件</div>
</template><script setup lang="ts">
import {ref, defineExpose} from "vue";// 暴露给父组件的值
const toFatherValue = ref<string>("我是要暴露给父组件的值")// 暴露给父组件的方法
const toFatherMethod = () => {console.log("我是要暴露给父组件的方法")
}
// 暴露方法和属性给父组件
defineExpose({toFatherMethod, toFatherValue})</script>
如下为父组件
<template><div class="fa"><div style="margin: 10px;">我是父组件</div><button @click="getSonMethod">获取子组件的方法</button><Son ref="sonMethodRef"></Son></div>
</template><script setup lang="ts">
import Son from './Son.vue'
import {ref} from "vue";const sonMethodRef = ref()const getSonMethod = () => {sonMethodRef.value.toFatherMethod()console.log(sonMethodRef.value.toFatherValue)
}</script><style scoped>
.fa{border: 3px solid cornflowerblue;width: 400px;text-align: center;
}
</style>
在子组件中定义属性toFatherValue
和方法toFatherMethod
,而后通过defineExpose
暴露出来。
父组件调用时,为子组件绑定一个ref
,并定义一个ref
变量sonMethodRef
,通过调用sonMethodRef
,来获取子组件暴露出来的属性和方法。
更多推荐
vue3中的父子间传值
发布评论