Vue组件通信

1、父组件向子组件通信
方法一：props

{{msg}}

方法二：使用$children

使用$children可以在父组件中访问子组件。比如调用子组件的方法，并传入值等。

2、子组件向父组件通信
方法一：使用vue事件

父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。

<template>
    <child @msgFunc="func"></child>
</template>

<script>

import child from './child.vue';

export default {
    components: {
        child
    },
    methods: {
        func (msg) {
            console.log(msg); // ssss
        }
    }
}
</script>
<template>
    <button @click="handleClick">点我</button>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    },
    methods () {
        handleClick () {
            //........
            this.$emit('msgFunc', 'ssss');
        }
    }
}
</script>

方法二：使用$parent

使用$parent可以访问父组件的实例，当然也就可以访问父组件的属性和方法了。

方法三： $refs
步骤1：在调用子组件的时候 可以指定ref属性

`<son ref='zhangsan'></son>`

步骤2：通过$refs
得到指定引用名称对应的组件实例

this.$refs.zhangsan

3、非父子组件、兄弟组件之间的数据传递
非父子组件通信，Vue官方推荐使用一个Vue实例作为中央事件总线。

意思就是将一个公共状态保存在一个这些组件共用的一个父组件上，这样就可以使用子组件通信父组件的方式来间接的完成通信了。
使用状态管理Vuex