vue 父子組件的方法調用

$emit 子組件觸發父組件的方法：

<!-- 子組件 -->
<template>
    <div id="child">
        <button @click="tryToParent">click</button>
    </div>
</template>
<script>
export default {
    name: 'child',
    methods:{
        tryToParent(){
            // 通過$emit進行觸發
            // 第一個參數為父組件監聽的事件名，后續參數為父組件方法的參數
            this.$emit("toParent","我從子組件傳來")
        }
    }
}
</script>

<!-- 父組件 -->
<template>
    <div id="parent">
        <!-- 監聽child的toParent事件廣播，用fromChild進行處理 -->
        <child @toParent="fromChild"></child>
    </div>
</template>
<script>
import child from "./child.vue"
export default {
    name: 'parent',
    components:{child},
    methods:{
        fromChild(msg){
            console.log(msg);  // 點擊子組件的button，這里最終打印出“我從子組件傳來”
        }
    }
}
</script>

 

$refs 父組件獲取子組件實例，進而調用子組件方法或者直接修改子組件屬性：

<!-- 子組件 -->
<template>
    <div id="child">
        <div>{{message1}}</div>
        <div>{{message2}}</div>
    </div>
</template>
<script>
export default {
    name: 'child',
    data(){
        return {
            message1:"",
            message2:""
        }
    },
    methods:{
        fromParent(msg){
            this.message1 = msg
        }
    }
}
</script>

<!-- 父組件 -->
<template>
    <div id="parent">
        <button @click="toChild">click</button>
        <child ref="child"></child>
    </div>
</template>
<script>
import child from "./child.vue"
export default {
    name: 'parent',
    components:{child},
    methods:{
        toChild(){
            /** this.$refs.child返回child組件實例 **/

            // 調用子組件的fromParent方法
            this.$refs.child.fromParent("我從父組件傳遞過來")
            // 直接修改child的data
            this.$refs.child.message2 = "啦啦啦"
        }
    }
}
</script>

 

　　在復雜的vue應用中，應該用vuex的store來管理跨組件的數據交流，再根據數據的變化觸發相應的方法。