以下會用到 Pug 套件，請去安裝 pug套件，可參考：

從頭開始用 Laravel 來做CRUD -12- 架設 - npm - pug

有時我們必需由父組件的按鈕去執行子組件裡面的方法(mothods)，來執行某些工作，我們來試著來做

1、首先建立 Parents.vue 在 template 寫上

<template lang="pug">
// Parents.vue 
div
    a(
        v-on:click="updateItem"
    )
    app-child(
        ref="appChild"
    )
</template>

2、再來在 script 裡寫上

<script>
import Child from './Child.vue'
export default{
    components: {
        appChild: Child,
    },
    methods:    {
        updateItem(){
            /** 執行子組件 methods*/
            this.$refs.appChild.$emit('update')
        }
    }
}
</script>

3、建立 Child.vue 在 template 寫上

<template lang="pug">
div
    p Child
</template>

4、再來在 script 裡寫上

<script>
export default{
    methods:    {
        updateClick(){
            // Do Something
        }
    },
    mounted(){
        this.$on('update', function(){
            this.updateClick()
        });
    },
}
</script>

利用 ref 方式，就可以達成這樣的要求！

可以試試喔！

--- 相關文章 ----
[Vue,組件] 如何由父組件按鈕去執行子組件的方法 (methods)
[Vue,組件] 如何由子組件按鈕去執行父組件的方法 (methods)
[Vue,組件] 如何由父組件傳值（Value）給子組件
[Vue,組件] 如何由子組件傳值（Value）給父組件
--- 更多的文章 在痞客邦 ----
痞客邦

感謝

感謝各位的觀看！
友情連結：鑽頭-瑜誠
文中如有技術不良或寫錯的部份，如您願意指出，我們也很樂意接受您的指正，但請不要惡意攻撃，我們只是為了樂趣而寫的文章。