vue父組件觸發子組件事件

1. 父組件中獲取子組件方法

• $children

<template>
    <div>
        <v-header></v-header>
        <v-content></v-content>
        <v-footer></v-footer>
    </div>
</template>
<script>
    import vHeader from './Header';
    import vContent from './Content';
    import vFooter from './Footer';

    export default {
        components:{vHeader,vContent,vFooter},
        created(){
            console.log(this.$children) 
            //輸出結果[VueComponent,VueComponent,VueComponent],此時可以通過下標獲取響應組件，如獲取vHeader為this.$children[0].
        }
    }
</script>

• $refs

<template>
    <div>
        <v-header ref='header'></v-header>
        <v-content ref='content'></v-content>
        <v-footer ref='footer'></v-footer>
    </div>
</template>
<script>
    import vHeader from './Header';
    import vContent from './Content';
    import vFooter from './Footer';

    export default {
        components:{vHeader,vContent,vFooter},
        created(){
            console.log(this.$refs);
            //輸出結果：{header:VueComponent,content:VueComponent,footer:VueComponent},此時可以通過對象key進行獲取響應組件，如vHeader組件獲取為this.$refs.header
        }
    }
</script>

2. 子組件中定義父組件所要觸發事件

• methods直接定義

<script>
    export default {
        methods:{
            childAction(val='hello world'){
                console.log(val)
            }
            //此時在父組件，可以通過獲取相應子組件，使用對象key值childAction對其進行調用,當前函數形參非必須
        }
    }
</script>

• $on

<script>
    export default {
        mounted(){
            this.$on('bridge',(val)=>{
                this.childAction(val);
            });
            ///此時通過$on進行監聽中間橋接函數bridge對目的方法childAction進行觸發
        },
        methods:{
            childAction(val='hello world'){
                console.log(val)
            }

        }
    }
</script>

---

3. 父組件調用子組件方法

• 父組件Father.vue

<template>
    <div>
        <v-header ref='header'></v-header>
        <v-content ref='content'></v-content>
        <v-footer ref='footer'></v-footer>
        <button @click='emitChild1'>ref與on觸發</button>
        <button @click='emitChild2'>ref直接觸發</button>
        <button @click='emitChild3'>children與on觸發</button>
        <button @click='emitChild4'>children直接觸發</button>
    </div>
</template>
<script>
    import vHeader from './Header';
    import vContent from './Content';
    import vFooter from './Footer';

    export default {
        components:{vHeader,vContent,vFooter},
        methods:{
            emitChild1(){
                this.$refs.footer.$emit('bridge','你好嗎!');
                //打印：  你好嗎
                this.$refs.footer.$emit('bridge');
                //打印：hello world
            },
            emitChild2(){
                this.$refs.footer.childAction('你好嗎!');
                //打印：  你好嗎
                this.$refs.footer.childAction();
                //打印：hello world
            },
            emitChild3(){
                this.$children[2].$emit('bridge','你好嗎!');
                //打印：  你好嗎
                this.$children[2].$emit('bridge');
                //打印：hello world
            },
            emitChild4(){
                this.$children[2].childAction('你好嗎!');
                //打印：  你好嗎
                this.$children[2].childAction();
                //打印：hello world
            },
        }
    }
</script>

• 子組件Footer.vue

<template>
    <footer>This is footer-component</footer>
</template>
<script>
    export default {
        mounted(){
            this.$on('bridge',(val)=>{
                this.childAction(val);
            });

        },
        methods:{
            childAction(val='hello world'){
                console.log(val)
            }

        }
    }
</script>