vue 祖先和后代之間傳值 provide inject dispatch

祖先--后代 provide inject

index.js

provide: {
        indexVal: 'indexVal--grandson1'
    },

grandson.js

<div>{{indexVal}}</div>

inject: ['indexVal'],

 

后代--祖先 dispatch

grandson.js

<div @click="dispatchClick">dispatch</div>

methods: {
        dispatchClick() {
            this.$dispatch('dispatch', 'grandson1--indexVal')
        }
    }

index.js

<div>{{msg}}</div>

data() {
        return {
            msg: ''
        }
    },
    mounted() {
        this.$on('dispatch', msg => {
            this.msg=`從grandson接收到的數據${msg}`
        })
    }