如何实现vue父组件中的多个子组件共用和处理同1 个变量

可以在父组件中声明一个数据属性，然后在多个子组件中通过 `props` 来访问和修改这个属性。当这个属性的值发生变化时，所有使用它的子组件都会自动更新。

例如，在父组件中声明一个名为 `sharedData` 的属性：

<template>
  <div>
    <child-component-1 :shared-data="sharedData"></child-component-1>
    <child-component-2 :shared-data="sharedData"></child-component-2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sharedData: 'initial value'
    }
  }
}
</script>

然后在两个子组件中分别接收这个属性，并在需要时修改它：

<template>
  <div>
    <p>Child Component 1:</p>
    <p>{{ sharedData }}</p>
    <button @click="updateSharedData">Update Shared Data</button>
  </div>
</template>

<script>
export default {
  props: {
    sharedData: String
  },
  methods: {
    updateSharedData() {
      this.$emit('update:sharedData', 'new value')
    }
  }
}
</script>

<template>
  <div>
    <p>Child Component 2:</p>
    <p>{{ sharedData }}</p>
    <button @click="updateSharedData">Update Shared Data</button>
  </div>
</template>

<script>
export default {
  props: {
    sharedData: String
  },
  methods: {
    updateSharedData() {
      this.$emit('update:sharedData', 'new value')
    }
  }
}
</script>

在子组件中，通过 `$emit` 方法触发一个名为 `update:sharedData` 的事件，来修改父组件中的 `sharedData` 属性。注意事件名称中的冒号表示绑定了一个 `v-bind` 指令，将子组件中的属性同步到父组件中。

最后，在父组件中监听这个事件，并更新 `sharedData` 属性的值：

<template>
  <div>
    <child-component-1 :shared-data="sharedData" @update:sharedData="sharedData = $event"></child-component-1>
    <child-component-2 :shared-data="sharedData" @update:sharedData="sharedData = $event"></child-component-2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sharedData: 'initial value'
    }
  }
}
</script>

这样，父组件中的 `sharedData` 属性就能被多个子组件共用，并且所有对它的修改都会同步到其他组件中。