父组件调用子组件方法

<!--父组件-->
<template>
    <!-- 给子组件注册引用信息 父组件通过$refs拿到的是子组件的组件实例对象-->
    <div id="chat" @click="hideChatBarComp">{{$route.params.name}}</div>
</template>

<script>
    export default {
        methods:{
            hideChatBarComp(){
                //父组件通过$ref获取到子组件的实例对象并调用子组件的hide方法
                this.$refs.change.hide();
            }
        }
    }
</script>

<!--子组件-->
<script>
    export default {
        methods:{
            hide(){
                this.types = '';
            }
        }
    }
</script>

子组件调用父组件

广播的方式

子组件通过事件触发父组件事件调用

<!--父组件-->
<template>
    <div class="page">
        <v-child @noticeParent="getNotice"></v-child>
    </div>
</template>

<script>
    export default {
        methods:{
            //在监听到noticeParent进行事件处理
            getNotice(params){
                console.log(params)
            }
        }
    }
</script>

<!--子组件-->
<script>
    export default {
        methods:{
            hide(){
                let params = '参数';
                //注册noticeParent事件，对外广播，params是需要传输的参数
                this.$emit('noticeParent', params)
            }
        }
    }
</script>

vm.$parent

通过vm.$parent拿到父组件实例，进行父组件中的事件/属性的操作

<!--父组件-->
<script>
    export default {
        methods:{
            parentMethod(){
                console.log('111')
            }
        }
    }
</script>

<!--子组件-->
<script>
    export default {
        methods:{
            getParentMethod(){
            //调用父组件的方法
             this.$parent.parentMethod()
            }
       }
    }
</script>

props接收

方法以属性传值的方式直接传给子组件，子组件props接收，设置数据类型function，在需要的地方调用。

在调研，后续补充…

来自：https://www.cnblogs.com/muzs/p/8625635.html

 4,714 total views,  6 views today