技術標籤：Vue

1、首先新建三個元件(parent，son，grandson)

2、parent.vue如下

<template>
    <div>
        {{msg}}
        <son></son>
    </div>
</template>

<script>
import son from "@/components/son.vue";
export default {
    name:"parent",
    components:{
        son
    },
    provide(){
        return{
            parentCom:this//暴露當前元件資訊
        }
    },
    data() {
        return {
            msg:"當前元件顯示的文字為parent"
        }
    },
    methods: {
        changeMsg(txt){
            this.msg = "當前元件顯示的文字為" + txt;
        }
    }
}
</script>

<style lang="scss" scoped>

</style>
 

3、son.vue內容如下

<template>
    <div>
        <grandson></grandson>
    </div>
</template>

<script>
import grandson from "@/components/grandson.vue";
export default {
    name:"son",
    components:{
        grandson
    }
}
</script>

<style lang="scss" scoped>

</style>
 

4、grandson內容如下

<template>
    <div>
        <button @click="change">點選改變文字內容</button>
    </div>
</template>

<script>
export default {
    name:"grandson",
    inject:['parentCom'],
    methods: {
        change(){
            //呼叫parentCom元件(這裡表示的就是parent)內的changeMsg方法
            this.parentCom.changeMsg("grandson");
        }
    }
}
</script>

<style lang="scss" scoped>

</style>
 

5、在xxx.vue中引用parent.vue元件

6、效果如下