当前位置：首页 > news >正文

Vue3——父子组件通信

news 来源：原创 2025/6/6 5:34:04

在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>