vue父子组件传值也能实时更新，只需1步！

2023-03-24 01:28:04

父子组件数据实时更新：告别prop和emit的局限

在Vue开发中，父子组件之间的通信至关重要，传统的方法如prop和emit虽然简单，却无法实现数据实时更新，当父组件数据发生变化时，子组件无法及时获取更新后的数据。本文将介绍多种方法，帮助你打破这种局限，实现父子组件数据实时更新。

1. provide和inject：双向数据流的利器

provide和inject是Vue 2.2.0引入的特性，它们允许父子组件之间建立双向数据流。父组件使用provide向子组件提供数据，而子组件使用inject注入这些数据。

// 父组件
export default {
  provide() {
    return {
      count: 0
    }
  }
}

// 子组件
export default {
  inject: ['count'],
  render() {
    return <div>Count: {this.count}</div>
  }
}

当父组件数据发生变化时，子组件会自动更新注入的数据，实现了数据实时更新。不过，此方法只能在父子组件之间建立数据通信，无法跨越层级。

2. 事件总线：跨越层级的沟通桥梁

事件总线是一种发布/订阅模式，允许组件之间进行通信，不受层级关系限制。父组件可以向事件总线发布事件，子组件可以订阅事件总线上的事件。

// 父组件
export default {
  methods: {
    incrementCount() {
      this.$bus.$emit('count-changed', this.count + 1)
    }
  }
}

// 子组件
export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    this.$bus.$on('count-changed', (newCount) => {
      this.count = newCount
    })
  }
}

这种方法可以实现跨越层级的通信，但代码相对复杂，可能会导致耦合度过高。

3. Vuex：状态管理的神器

Vuex是一个状态管理库，可以实现组件之间的数据共享和管理。父组件将数据存储在Vuex中，子组件可以从Vuex中获取数据。

// 父组件
export default {
  methods: {
    incrementCount() {
      this.$store.commit('incrementCount')
    }
  }
}

// 子组件
export default {
  data() {
    return {
      count: this.$store.state.count
    }
  }
}