###
Vue3 中父子
组件间
传值及
方法调用
#### 父
组件向子
组件传递属性 (Props)
在
Vue3 中，父
组件可以通过 `props` 向子
组件传递数据。这通常用于单向下行通信，即从父到子的数据流动。
```html
<!-- ParentComponent
.vue -->
<template>
<ChildComponent :message="parentMessage" />
</template>
<script setup>
import { ref } from '
vue';
const parentMessage = ref('Hello Child');
</script>
```
子
组件接收这些属性并将其作为只读变量处理：
```html
<!-- ChildComponent
.vue -->
<template>
<p>{{ message }}</p>
</script>
<script setup>
defineProps(['message']);
</script>
```
这种方式确保了数据流清晰可见，并保持良好的封装性[^2]。
#### 子
组件向父
组件发送消息 ($emit)
对于自下而上的通讯需求，则可以利用 `$emit()`
方法触发自定义事件通知父级更新状态或执行特定逻辑操作。
```html
<!-- ChildComponent
.vue -->
<button @click="$emit('updateParent', newValue)">Update Parent Value</button>
```
对应的父
组件监听此事件并对之作出响应:
```html
<!-- ParentComponent
.vue -->
<ChildComponent @update-parent="handleValueChange"/>
...
methods: {
handleValueChange(newValue){
console
.log(`New value received:${newValue}`);
}
}
```
这种机制允许灵活地建立双向交互模式而不破坏原有架构设计原则[^3]
.
####
调用子
组件内部函数
有时可能需要直接访问某个嵌套较深的孩子实例中的公共 API 。为此可以在模板里给目标元素加上引用标记(ref)，之后便可通过该句柄来操纵它所指向的对象。
```html
<!-- ParentComponent
.vue -->
<template>
<child-component ref="myChild"></child-component>
</template>
<script setup>
import { onMounted, ref } from "
vue";
let myChild = ref(null);
onMounted(() => {
if(myChild
.value && typeof myChild
.value
.someMethod === 'function'){
myChild
.value
.someMethod();
}
});
</script>
```
注意这里使用的是组合式API (`setup`)语法糖形式下的写法，在选项式API中会略有不同[^4]
.
#### 定义暴露接口(expose)
为了让外部能够安全可靠地获取到某些成员变量或是
调用指定的服务端口，可在子
组件内声明哪些部分是可以被外界接触得到的。
```
javascript
// ChildComponent
.vue
export default{
...
expose:['publicApi'],
methods:{
publicApi(){
alert("This is a exposed method");
}
}
};
```
这样做的好处在于既保护了私有字段不被随意篡改同时也提供了必要的开放程度满足实际应用场景的需求[^1]
.
EventBus.js内容为方框内容，不需要改变 
扫一扫
6679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
