在
Vue 3中，
监听父子组件传值变化有多种方法，以下为你详细介绍：
###
父组件向子
组件传值及
监听变化
父组件通过`props`将数据
传递给子
组件，子
组件接收并
监听该`props`的变化。示例代码如下：
```
vue
<!-- 子
组件 ChildComponent
.vue -->
<template>
<div>
<!-- 显示
父组件传递过来的
值 -->
<p>Received value from parent: {{ childProp }}</p>
</div>
</template>
<script setup>
import { defineProps,
watch } from '
vue';
// 定义接收的props
const props = defineProps({
childProp: {
type: String,
default: ''
}
});
//
监听props变化
watch(() => props
.childProp, (newValue, oldValue) => {
console
.log('childProp changed from', oldValue, 'to', newValue);
});
</script>
```
```
vue
<!--
父组件 ParentComponent
.vue -->
<template>
<div>
<!-- 输入框用于修改
传递给子
组件的
值 -->
<input v-model="parentValue" placeholder="Enter a value">
<!--
使用子
组件并
传递
值 -->
<ChildComponent :childProp="parentValue" />
</div>
</template>
<script setup>
import { ref } from '
vue';
import ChildComponent from '
./ChildComponent
.vue';
// 定义
父组件的数据
const parentValue = ref('');
</script>
```
上述代码中，
父组件通过`props`将`parentValue`
传递给子
组件，子
组件使用`
watch`函数
监听`childProp`的变化，当
值改变时会
触发回调函数并打印新旧
值。
### 子
组件向
父组件传值及
监听变化
子
组件通过`emit`方法向
父组件发送消息，
父组件监听子
组件的事件。示例代码如下：
```
vue
<!-- 子
组件 ChildComponent
.vue -->
<template>
<div>
<!-- 输入框，输入
值变化时
触发事件 -->
<input v-model="inputValue" @input="sendValueToParent">
</div>
</template>
<script setup>
import { ref, defineEmits } from '
vue';
// 定义子
组件可以
触发的事件
const emit = defineEmits(['updateParentValue']);
// 定义子
组件的数据
const inputValue = ref('');
//
触发事件将
值传递给
父组件
const sendValueToParent = () => {
emit('updateParentValue', inputValue
.value);
};
</script>
```
```
vue
<!--
父组件 ParentComponent
.vue -->
<template>
<div>
<!--
使用子
组件并
监听事件 -->
<ChildComponent @updateParentValue="updateParentValue" />
<!-- 显示从子
组件接收到的
值 -->
<p>Value received from child: {{ receivedValue }}</p>
</div>
</template>
<script setup>
import { ref } from '
vue';
import ChildComponent from '
./ChildComponent
.vue';
// 定义
父组件的数据
const receivedValue = ref('');
// 处理子
组件传递过来的
值
const updateParentValue = (value) => {
receivedValue
.value = value;
console
.log('Received value from child:', value);
};
</script>
```
上述代码中，子
组件通过`emit`
触发`updateParentValue`事件并
传递`inputValue`，
父组件监听该事件并在`updateParentValue`方法中更新`receivedValue`。
### 深度
监听
若
传递的`props`是对象或数组，需要深度
监听其内部变化，可在`
watch`中设置`deep: true`。示例代码如下：
```
vue
<script setup>
import { defineProps,
watch } from '
vue';
const props = defineProps({
complexProp: {
type: Object,
default: () => ({})
}
});
// 深度
监听对象内部变化
watch(() => props
.complexProp, (newValue, oldValue) => {
console
.log('complexProp changed', newValue);
}, { deep: true });
</script>
```
此代码展示了如何深度
监听`complexProp`对象内部的变化。
在子页面中使用props接收父级的数据，如果你写的就像我的一样传相同的值watch不会生效，
扫一扫
472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
