Vue3——父子组件通信

我也有鱼鱼蒸

于 2025-05-17 14:48:46 发布

阅读量859

点赞数 12

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74386799/article/details/148010434

版权

Vue 专栏收录该内容

18 篇文章

订阅专栏

在Vue开发中，组件通信是核心概念之一。良好的组件通信机制能让我们的应用更加清晰、可维护。

父传子defineProps

defineProps是一个编译时宏，仅在内部可用，不需要显式导入。声明的 props 会自动暴露给模板。还返回一个对象，其中包含传递给组件的所有 props，以便我们可以根据需要在 JavaScript 中访问它们：<script setup>defineProps（在一个组件中仅可使用一次）

在使用前先准备两个父子关系的组件：

<script setup>
import Son from './components/Son.vue';
</script>

<template>
  <div>
    我是父组件App.vue
    <Son></Son>
  </div>
</template>

<style scoped></style>

<script setup>

</script>

<template>
  <div>
    我是子组件Son.app
  </div>
</template>

<style scoped></style>

当前的效果为：

想要实现父传子的效果，首先要在父组件中定义好数据，在子组件的标签中通过绑定自定义属性的方式，给定一个值；在子组件中使用defineProps函数接收，这其中有很多种情况。

defineProps()内可使用数组语法或对象语法接收：

数组语法：

使用中括号接收[]
仅声明传递数据的名称，不需要指定类型或其他配置

对象语法：

使用大括号接收{}
需指定传递类型，可指定是否必填，默认值，自定义校验函数等。

注：父组件的中的子标签自定义属性必须与defineProps接收的名称保持一致，或者父组件中使用HTML特性规范，子组件中使用小驼峰命规范

传递静态数据

数组接收

<script setup>
import Son from './components/Son.vue';
</script>

<template>
  <div>
    我是父组件App.vue
    <Son :props-a="666"></Son>
  </div>
</template>

<style scoped></style>

使用时可直接使用{{propsA}}或{{b.propsA}}

<script setup>
const b = defineProps(["propsA"])
</script>

<template>
  <div>
    父组件传的值为--{{ b.propsA }}
  </div>
</template>

<style scoped></style>

<script setup>
const b = defineProps(["propsA"])
</script>

<template>
  <div>
    父组件传的值为--{{ propsA }}
  </div>
</template>

<style scoped></style>

<script setup>
import Son from './components/Son.vue';
</script>

<template>
  <div>
    我是父组件App.vue
    <Son :props-a="666" :props-num="'Stringa'"></Son>
  </div>
</template>

<style scoped></style>

<script setup>
const b = defineProps(["propsA","propsNum"])
</script>

<template>
  <div>
    父组件传的值为--{{ propsA }}{{ b.propsNum }}
  </div>
</template>

<style scoped></style>

对象接收

<script setup>
const b = defineProps({"propsA":Number,"propsNum":String})
</script>

<template>
  <div>
    父组件传的值为--{{ propsA }}{{ b.propsNum }}
  </div>
</template>

<style scoped></style>

传递对象数据

一般情况下传递的值都是响应式的：

<script setup>
import Son from './components/Son.vue';
import { ref } from 'vue';

const str = ref("AppString")
const obj = ref({
  msg:"ObjectMsg",
  massage:"ObjMassage"
})
</script>

<template>
  <div>
    我是父组件App.vue
    <Son :props-a="str" :props-num="obj"></Son>
  </div>
</template>

<style scoped></style>

数组接收

<script setup>
const b = defineProps(["propsA","propsNum"])
</script>

<template>
  <div>
    父组件传的值为--{{ propsA }}{{ b.propsNum }}
  </div>
</template>

<style scoped></style>

这里可以直接使用b.propsNum.msg，不需要.value（在script也是一样），因为父组件在传递整个ref对象时会自动解包，传递ref对象的某个属性时也一样：

<script setup>
const b = defineProps(["propsA","propsNum"])
console.log(b.propsNum);


</script>

<template>
  <div>
    父组件传的值为--{{ propsA }}-{{ b.propsNum }}
  </div>
</template>

<style scoped></style>

对象接收

使用对象接收时要理清楚接收的类型，传递对象时可直接使用一个大括号

<script setup>
const b = defineProps({
  "propsA":String ,
  "propsNum":{
  }
})


</script>

<template>
  <div>
    父组件传的值为--{{ propsA }}-{{ b.propsNum }}
  </div>
</template>

<style scoped></style>

不过应该指定其它的类型Object：

<script setup>
const b = defineProps({
  "propsA":String ,
  "propsNum":Object
})


</script>

<template>
  <div>
    父组件传的值为--{{ propsA }}-{{ b.propsNum }}
  </div>
</template>

<style scoped></style>

注意：如果父组件直接传递一个响应式数据，那么子组件可以直接修改父组件的值。

<script setup>
import Son from './components/Son.vue';
import { ref } from 'vue';

const str = ref("AppString")
const obj = ref({
  msg:"ObjectMsg",
  massage:"ObjMassage",
  num:88
})
</script>

<template>
  <div>
    我是父组件App.vue{{ obj.msg }}
    <Son :props-a="str" :props-num="obj"></Son>
  </div>
</template>

<style scoped></style>

<script setup>
const b = defineProps({
  "propsA":String ,
  "propsNum":Object
})
const ad =()=>{
  b.propsNum.msg = "ooooo"
}

</script>

<template>
  <div>
    父组件传的值为--{{ propsA }}-{{ b.propsNum.msg }}
    <button @click="ad">修改值</button>
  </div>
</template>

<style scoped></style>

此时点击修改值，会直接修改父组件中的值：

如果传递的是响应式对象的属性，则子组件不能修改其值。

props 展开

当父组件向子组件传递数据时，如果直接使用 v-bind="object" 而不指定具体属性名，这称为 "props 展开" 或 "对象绑定"。这种方式会将对象的所有属性自动展开为单独的 props。

注：在子组件接收时，属性名和父组件中的属性值要一致

<script setup>
import Son from './components/Son.vue';
import { ref } from 'vue';

const obj = ref({
  msg:"ObjectMsg",
  massage:"ObjMassage",
  num:88
})
</script>

<template>
  <div>
    我是父组件App.vue{{ obj.msg }}
    <Son :="obj"></Son>
  </div>
</template>

<style scoped></style>

<script setup>
const b = defineProps({
  msg:String,
  massage:String,
  num:Number
})

</script>

<template>
  <div>
    父组件传的值为--{{b.msg}}
  </div>
</template>

<style scoped></style>

在子组件中接收时缺少属性时不会报错，添加属性时，可以使用default给它默认值：

<script setup>
const b = defineProps({
  msg:String,
  massage:String,
  num:Number,
  aa:{
    type:Number,
    required:true,
    default:200
  }
})

</script>

<template>
  <div>
    父组件传的值为--{{b.msg}}{{ b.aa }}
  </div>
</template>

<style scoped></style>

子传父defineEmits

defineEmits 用于声明组件可以触发的自定义事件（子组件向父组件通信）

使用步骤：

用defineEmits定义事件名，得到emits对象
用emits函数指定事件名，并传递数据
父组件接收时，在子组件标签中触发子组件定义的事件，触发的函数的参数就是传递过来的值

<script setup>
import { reactive } from 'vue';
const emit = defineEmits(['e_app'])

const data = reactive({
  msg:""
})

const btn = ()=>{
  emit('e_app',data)
}
</script>

<template>
  <div>
    <input type="text" v-model="data.msg">
    <button @click="btn">提交给父组件</button>
  </div>
</template>

<style scoped></style>

<script setup>
import Son from './components/Son.vue';
import { ref } from 'vue';

const app =(data) =>{
  console.log(data.msg);
  massage.value = data.msg
}

const massage = ref("")
</script>

<template>
  <div>
    我是父组件
    {{ massage }}
    <Son @e_app="app"></Son>
  </div>
</template>

<style scoped></style>