vue 组件共享状态

Question

在vue中又时会把组件封装成多个组件，比如el-ui 中的select 和option 组件
，在这两个组件当中是如何共享状态的，或者说option的如何触发select 的value 的值同步改变的。

Answer 1

在vue2.x中是通过provide/inject实现的，具体可以看文档https://cn.vuejs.org/v2/api/?...

Answer 2

比较老的套路，是利用找组件的形式，比如找select的子组件option，找到它们的实例，给它们注入一些值，option找到select父组件，触发它的方法。一个字“找”。

现在新的套路，举例vue3，一般采用 provide/inject，就很方便了，vue3 支持响应式。

Answer 3

方案其实蛮多的。比如 select 和 option，因为存在很明确的父子关系，直接用事件侦听就可以。因为 option 上大部分事件都会冒泡，在 select 上侦听然后处理就行了。

另外层级明确的话，this.$parent 也可以工作。

如果是多个没有层级关系的组件，建议用 vuex。