vue3中的父子间传值

2024-04-07 19

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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中的父子间传值

一、父传子 defineProps

二、子传父 defineEmits

三、子组件暴露属性给父组件 defineExpose

热门文章

最新文章

相关课程

相关电子书