一、现象

在 Vue 中，props 是用来接收父组件传递给子组件的数据的。然而，有时你可能会发现子组件的 props 并没有实时地反映父组件中对应数据的改变。

二、可能的原因

1.响应式系统的限制

Vue 的响应式系统依赖于 JavaScript 的 getter 和 setter。当父组件中的数据发生改变时，如果这个改变是 Vue 的响应式系统可以监测到的（例如，通过赋值操作直接修改对象的属性），那么子组件中的 props 会自动更新。但是，如果父组件中的数据改变是通过某些方式绕过了 Vue 的响应式系统（例如，通过数组索引直接修改数组元素或替换数组/对象引用），那么子组件的 props 可能不会更新。

2.异步更新队列

Vue 为了优化性能，使用了异步更新队列。这意味着当你修改数据后，视图不会立即更新，而是等到下一个“tick”时才更新。这通常不是问题，因为大多数情况下你不需要立即看到更新后的视图。但是，如果你在数据改变后立即尝试读取子组件的 props，可能会得到旧的值，因为视图还没有更新。

3.父组件和子组件的生命周期

确保在父组件中传递 props 的时候，子组件已经被创建和挂载。如果在子组件还没有挂载之前就改变了父组件中的数据，那么子组件的 props 可能不会正确更新。

4.子组件内部对 props 的处理

如果你在子组件内部对 props 进行了修改或计算，那么可能会产生不可预期的结果。Vue 不推荐直接修改 props，而应该使用 data 或 computed 属性来处理 props 的值。

三、组件通信的几种场景（解决方案）

1.子组件想修改父组件的数据

第一种是我们常用的：子组件通过props接收，并用emit通知父组件修改信息
父组件：

<template><view>我是父组件</view><Child :msg="msg" @msg="getMsg"></Child>
</template>
<script>import Child from './Child'components:{Child},data(){return{msg:"我是要传给子组件的信息"}},methods:{getMsg(msg){this.msg=msg;}}
</script>

子组件接收到信息好，想修改父组件的信息怎么办？单向数据流：传递要修改的值，然后通知父组件去修改
子组件：

<template><view>我是子组件</view>{{msg}}<button @click="pushMsg">更新msg</button>
</template>
<script>props:["msg"],data(){return{newMsg:"我是子组件传递的信息"}},methods:{pushMsg(e){this.$emit("msg",this.newMsg);}}
</script>

2.子组件传给父组件的值是动态变化的

可以用watch进行监听,监听到后发送给父组件：

<template><view>我是子组件</view>{{msg}}
</template>
<script>props:["msg"],data(){return{msg:"我是子组件传递的信息"}},watch{'msg':function(newValue,oldValue){this.$emit("msg",newValue);}}</script>

以上两种情况都是子数据想要修改、获取父组件数据的情况，下面一种情况是父组件想要获取子组件的数据

3.父组件引用子组件

ref 是用来在 Vue 组件中给子组件或 DOM 元素添加一个标识符，以便在父组件中可以直接引用这些子组件或 DOM 元素。通过 ref 可以方便地在父组件中访问子组件的属性和方法，或者操作 DOM 元素，而无需通过事件或 props 进行通信。

注：$refs 只有在组件渲染完成之后才能访问到真正的 DOM 元素或子组件实例。
父组件：

<template><div><ChildComponent ref="childRef"></ChildComponent><button @click="getChildInfo">获取子组件信息</button></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {getChildInfo() {const childInstance = this.$refs.childRef;console.log(childInstance.message);childInstance.methodInChild(); // 调用子组件的方法}}
}
</script>

在上面的例子中，父组件 ParentComponent.vue 中通过 ref=“childRef” 给子组件 ChildComponent 添加了一个引用。在父组件的 getChildInfo 方法中，通过 this.$refs.childRef 就可以获取到子组件的实例，然后可以直接访问子组件的属性（如 message）或方法（如 methodInChild()）。