今天有一个问题

父组件 A 中有 两个 子组件 A1 A2；

在 A1 和A2 中 监听 父组件的 a 变量 ，当a变量更新时

A1 和 A2 同时（？存疑）向父组件 emit change事件 分别传值 1 和 2，父组件接收事件后更改 自身 b变量，

上诉过程发生后 A组件的b变量 是 1 还是2

---

怎么说都不如实践，毕竟实践是检验真理的唯一标准

首先打开vsCode 然后打开终端，输入：

vue create test-emit

选择一个vue2的项目新建。

app.vue

<template>
  <div>
    我是父组件{{ datas }}
    <A1 @datasChange="change" v-bind:datas="datas" />
    <A2 @datasChange="change" v-bind:datas="datas"  />
    <button @click="datas=datas-1">点我改变data</button>
  </div>
</template>

<script>
import A1 from "./components/A1.vue";
import A2 from "./components/A2.vue";

export default {
  name: "App",
  components: {
    A1,
    A2,
  },
  data() {
    return {
      datas: 0
    }
  },
  methods:{
    change(e){
      this.datas = e
    }
  }
};
</script>

<style>
</style>

在components目录下新建一个A1.vue 和A2.vue文件

A1.vue

<template>
  <div style="display: flex">我是A1组件{{ datas }}</div>
</template>

<script>
export default {
  name: "A1",
  props: {
    datas: Number,
  },
  watch:{
    datas(val){
      console.log("a1监听到了变化",val)
      this.$emit('datasChange',1)
    }
  }
};
</script>

A2.vue

<template>
  <div style="display: flex">我是A2组件{{ datas }}</div>
</template>

<script>
export default {
  name: "A2",
  props: {
    datas: Number,
  },
  watch:{
    datas(val){
      console.log("a2监听到了变化",val)
      this.$emit('datasChange',2)
    }
  }
};
</script>

然后输入命令

cd test-emit //进入项目目录

yarn serve // 如果你使用的是Yarn

npm run serve // 如果你使用的是Npm

---

项目运行界面

默认状态

点击按钮后

---

运行结果

---

看下控制台

为啥会这样

调换位置

A2放到上边

运行结果

控制台

---

结论

我们观察到了运行的顺序，同样我们知道了一个结论。关于vue的watch的。

就是如果两个组件同时watch。那么一定是在上边的先监听到watch事件。

然后修改了值。然后第二个组件才能监听到watch事件。然后再进行改变。

才会再次修改。但是他们没有我想象中的来回修改。我相信。应该是在vue源码中有相关的保护。防止多次触发。导致页面卡死。