###
Vue3 组件间
传值与监听
#### 使用 `props` 和 `$emit`
父
组件可以通过定义属性来向子
组件传递数据。这些属性被称为 `props`。当需要从子
组件触发事件通知父
组件时，则可以使用 `$emit` 方法。
```html
<!-- ParentComponent.
vue -->
<template>
<div>
<!-- 向 ChildComponent
传递 message 属性 -->
<ChildComponent :message="parentMessage" @childEvent="handleChildEvent"/>
</div>
</template>
<script setup>
import { ref } from &#
39;
vue&#
39;;
const parentMessage = ref(&#
39;Hello, child!&#
39;);
function handleChildEvent(data){
console.log(`Received data from child component: ${data}`);
}
</script>
```
```html
<!-- ChildComponent.
vue -->
<template>
<button @click="sendMessageToParent">Send Message to Parent</button>
</template>
<script setup>
defineProps([&#
39;message&#
39;]);
function sendMessageToParent(){
defineEmits()(&#
39;childEvent&#
39;, &#
39;Data sent by the child&#
39;);
}
</script>
```
此方法适用于父子关系中的单向数据流[^1]。
#### 使用 `v-model`
对于双向绑定场景，比如表单项，默认情况下可以用 `v-model` 来简化输入框和其他控件的数据同步操作。
```html
<!-- ParentComponent.
vue -->
<template>
<input v-model="searchText">
<CustomInput v-model="searchText"></CustomInput>
</template>
<script setup>
import CustomInput from &#
39;./components/CustomInput.
vue&#
39;
import {ref} from "
vue";
let searchText = ref(&#
39;&#
39;);
</script>
```
```html
<!-- CustomInput.
vue -->
<template>
<input type="text"
:value="modelValue"
@input="$emit(&#
39;update:modelValue&#
39;, $event.target.value)">
</template>
<script setup>
defineProps({
modelValue: String,
});
</script>
```
这种方式使得自定义
组件能够像内置元素一样支持 `v-model`[^2]。
#### 使用 `provide` / `inject`
如果多个嵌套层次的
组件都需要访问相同的状态或函数，那么通过 `provide` 提供者模式可以在祖先
组件中声明资源，在后代
组件里注入并消费它们。
```
javascript
// App.
vue (Ancestor Component)
export default {
provide () {
return {
sharedState: this.sharedState,
updateSharedState: this.updateSharedState
}
},
methods:{
updateSharedState(newValue){
this.sharedState=newValue;
}
}
};
```
```
javascript
// AnyDescendant.
vue (Any Descendant Component)
export default {
inject: [&#
39;sharedState&#
39;,&#
39;updateSharedState&#
39;],
mounted(){
console.log(this.sharedState);
}
};
```
这允许跨多层
组件共享状态而无需逐级
传递参数。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
