VUE2.0 观察者模式、父子组件调用

一、观察者模式

1. 事件发布 ： this.$root.eventHub.$emit(事件名称，传递的参数);
2. 订阅事件 ： this.$root.eventHub.$on(事件名称，(response)=>{ })
3. 取消订阅： this.$root.eventHub.$off(事件名称)

二、父子组件的调用

<!--子组件-->
<template>
    <div @click="callParentFunction">点击调用子组件方法</div>
    <son-component ref="sonModal"></son-component>
</template>
<script>
    export default{
        data(){
            return {
                num:1
            }
        },
        methods:{ 
            /**
             * 初始化数据
             **/
            init(){
                
            },
            /**
             * 调用父组件方法
             **/
            callParentFunction(){
                this.$parent.init();
                //给父子属性赋值
                this.$parent.testNum =1;
            }
        }
    }
</script>
<!--父组件-->
<template>
    <div @click="callSonFunction">点击调用子组件方法</div>
    <son-component ref="sonModal"></son-component>
</template>
<script>
    export default{
        data(){
            return {
                messageList:[],
                testNum:1
            }
        },
        methods:{
            /**
             * 初始化数据
             **/
            init(){
                this.messageList= [1,2,3];
            },
            /**
             * 调用子组件方法
             **/
            callSonFunction(){
                this.$refs.sonModal.init();
                this.$refs.sonModal.num=2;
            }
        }
    }
</script>

三、$children  返回的是一个组件集合 this.$children[i].data 可访问子组件属性