提示:当前为默认节点,你可以在后盾窜改为你想要的站点!
站长资源
中国站长网站

vue父组件如何触发子组件的事件

一. 父组件中获取子组件方法

$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>

二. 子组件中定义父组件所要触发事件

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>

三. 父组件调用子组件方法

父组件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>

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » vue父组件如何触发子组件的事件

评论 抢沙发

评论前务必登录!