父组件向子组件传递的属性发生改变时，子组件如何同步更新

最新推荐文章于 2025-06-14 15:32:34 发布

原创最新推荐文章于 2025-06-14 15:32:34 发布 · 6.7k 阅读

6 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了在Vue中，如何实现在父组件状态更新时，子组件和兄弟组件的状态能够实时同步更新。通过实例展示了使用v-model、自定义事件和watch来实现状态的双向绑定和监听，确保组件间数据的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件中的状态发生改变，子组件中的状态同步发生改变。

处于同一父组件中的兄弟节点之间如何同步状态。

留意watch，这是要点：父组件向子组件传递的属性发生改变时，子组件如何同步。

<template>
  <div>
    <Man v-on:beliefChange="beliefChange" v-bind:belief="belief"></Man>
    <Woman v-on:beliefChange="beliefChange" v-bind:belief="belief"></Woman>
    <input v-model="belief"/>
  </div>
</template>

<script>
import Man from './Man';
import Woman from './Woman';

export default {
  name: 'Person',
  components: {Man, Woman},
  data() {
    return {
      belief: 'image'
    }
  },
  methods: {

    beliefChange(newBelief) {
      this.belief = newBelief;
      console.log('this.belief', this.belief);
    }
  },
}
</script>

<style scoped>

</style>

<template>
  <div>
    <input v-model="value" v-on:change="changeValue" />
  </div>
</template>

<script>

export default {
  name: 'Man',
  props: ['belief'],
  data() {
    return {
      value: this.belief
    }
  },
  methods: {
    changeValue() {
      this.$emit('beliefChange', this.value);
    }
  },
  watch: {
    belief: function(newValue, oldValue) {
      this.value = newValue;
    }
  },
}
</script>

<style scoped>

</style>

<template>
  <div>
    <input v-model="value" v-on:change="changeValue" />
  </div>
</template>

<script>

export default {
  name: 'Woman',
  props: ['belief'],
  data() {
    return {
      value: this.belief
    }
  },
  methods: {
    changeValue() {
      this.$emit('beliefChange', this.value);
    }
  },
  watch: {
    belief: function(newValue, oldValue) {
      this.value = newValue;
    }
  },
}
</script>

<style scoped>

</style>