vue通过provide+inject实现祖孙组件响应式传值

    时隔近两年，再看当初写的代码，简直不忍直视，所有内容写在一个vue文件中，这个模块中，有两个文件的内容达到了三四千行代码之多。在各种因素的影响下，毅然决定重构之前写的代码，为了以后再加需求的时候更好维护，为了看得舒服。拆分组件，优化逻辑，花了三天时间才整理清晰，在这个过程中势必就需要用到provide和inject方法，组件层级太多，全部都使用props肯定不现实。

    先来看看基本用法，可以直接传基本类型的值，但是这种方式传值不是响应式的，只能生效一次

    再来看看响应式的方法，可以使用方法返回，也可以定义一个对象，把需要传递的值放在对象中返回

    但是在实际操作中，采用响应式的第二种方法确没有生效，可能与写法有关系，例子中是在data中定义的对象，而我是在computed中写的计算属性。

    尝试方法一

    父级组件：

    子组件：

        仅仅是这样，还不能满足需求，由于父级组件是使用的计算属性，而且对应计算属性需要在方法被触发后才会计算结果，而provide在方法被触发前就执行了，导致在子组件中未获取到值。所以还需要在子组件中添加computed和watch实时监听父组件中的内容。