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

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

當你開始使用 Vue.js 的 components(組件) 時，會經常使用到父子組件，需要互相執行方法（mothods）的問題！

今天來說說，如何由子組件按鈕（v-on:click）時，如何去執行父組件裡的方法。

大致的狀況說明，當您的是個CRUD網頁，想把常用工具欄位，獨立為一個Vue檔（在這為Child.vue），以便日後共用及修改方便使用

結果當獨立出來後，發現 Child 子組件的 update ，還是須要到父組件完成，因為有可能表單資料都在父組件，你在子組件點 update

變成沒有用，就必須在子組件去 觸動父組件的方法（mothods），以完成update的工作

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

<template lang="pug">
// Parents.vue 
div
    app-child(
        v-on:update-item="updateItem(model,vuex)"
    )
</template>

2、再來在 script 裡寫上 ，雖然還沒建立 Child.vue 我們還是先上

<script>
// Parents.vue
import Child from './Child.vue'

export default{
    components: {
        appChild: Child,
    },
    data(){
        return {}
    },
    methods:    {
        updateItme(model,vuex){
            // do Something
        }
    }
}
</script>

3、建立 Child.vue 在 template 寫上

<template lang="pug">
// Child.vue 
div
    a(
        v-on:click="updateClick()"
    ) update
</template>

4、再來在 script 裡寫上

<script>
// Child.vue
export default{
    methods:    {
        updateClick(){
            this.$emit('update-item') 
        }
    }
}
</script>

上圖，可由 父組件 Parent 利用

v-on:update-item="updateItem()"

子組件 Child 利用 在方法裡，利用

this.$emit('update-itme')

就以完成執行！！

可以試試喔！

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

感謝

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