掌握Vue组件间多代通信秘诀：provide/inject

前端

2023-09-09 03:18:01

Provide/Inject：Vue 组件通信中的秘密武器

多代组件通信的优雅解决方案

在 Vue 世界中，组件通信至关重要，而 provide/inject 则是跨多代组件通信的秘密武器。它使祖先组件能够向其所有子孙后代注入依赖，即使组件层次再深，也能在上下游关系持续的整个过程中有效。

为什么选择 provide/inject？

当涉及到组件通信时，有各种方法，例如 Vuex、$root 和全局事件总线。但是，provide/inject 为何脱颖而出？

优雅的解决方案： 它提供了跨级组件通信的优雅方法，同时保持组件的独立性。
易于使用： 只需在 provide 和 inject 选项中指定需要传递和接收的数据即可。

如何使用 provide/inject

1. 在祖先组件中使用 provide

祖先组件通过 provide 选项指定需要传递的数据：

export default {
  provide() {
    return {
      message: 'Hello, world!'
    }
  }
}

2. 在后代组件中使用 inject

后代组件使用 inject 选项接收从祖先组件传递的数据：

export default {
  inject: ['message'],
  // ...
}

然后，组件可以直接使用注入的数据：

export default {
  inject: ['message'],
  render() {
    return <div>{ this.message }</div>
  }
}

3. 响应式依赖

provide/inject 传递的数据是响应式的，这意味着如果祖先组件中的数据发生变化，后代组件中的数据也会自动更新：

export default {
  provide() {
    return {
      count: 0
    }
  }
}

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

当祖先组件中的 count 数据发生变化时，后代组件中的 count 数据也会自动更新。

实战：构建一个简单的计数器应用

让我们使用 provide/inject 构建一个简单的计数器应用：

祖先组件

export default {
  provide() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

后代组件

export default {
  inject: ['count'],
  render() {
    return (
      <div>
        <p>Count: { this.count }</p>
        <button @click="increment">Increment</button>
      </div>
    )
  },
  methods: {
    increment() {
      this.$parent.$emit('increment')
    }
  }
}