vue provide inject使用方法

由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以访问祖先组件的数据

//components-parent
provide(){
        return {
            // 注意这里如果是变动的值一定要写可以监听到变化的，
            // data里面的值并且一定是对象JSON，否则不会被监听到
            "provideData":this.click
        }
    },
 data(){
        return {
            "click":{
                "clickData":""
            }
        }
    },
 methods: {
        clickParent(){
            this.click.clickData="传过来了"
        }
    },

//components-child-child
 inject:['provideData'],
    data(){
        return {
            str:""
        }
    },
    watch: {
        //如果监听数据变化一定要深度监听，否则监听不到数据变化
        provideData:{
            "deep":true,
            handler(){
              
                console.log("watch监听到了")
            }
        }
    },