雲橙雨林

上次利用 子組件去行父組件方法(mothods) 來去完成父組件方法的執行，這次我們反過來做

如父組件去執行子組件的工作。

有時父組件在執行時，並且一併要子組件也執行方法，這時就得上了

parents.vue

<template lang="pug">
    div
        a(
            v-on:click="updateItem"
        )
        app-child(
            ref="appChild"
        )
</template>
<script>
    import Child from './Child.vue'
    export default{
        components: {
            appChild: Child,
        },
        methods:    {
            updateItem(){
                /** 執行子組件 methods*/
                this.$refs.appChild.$emit('update')
            }
        }
    }
</script>

child.vue

<template lang="pug">
    div
        p Child
</template>
<script>
    export default{
        methods:    {
            updateClick(){
                // Do Something
            }
        },
        mounted(){
            this.$on('update', function(){
                this.updateClick()
            });
        },
    }
</script>

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

更正：

貼上的parent.vue 圖片裡 的 this.$refs.appSelfForm.$emit('update') 是錯的，應該為 this.$refs.appChild.$emit('update')