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

本文详细介绍了在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>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值