组件通信

组件关系可以分为父子组件通信、兄弟组件通信、跨级组件通信

自定义事件--子组件给父组件传递数据

子组件$emit()来触发事件
父组件$on()来监听事件

步骤： 一、自定义事件
二、在子组件中用$emit触发事件，第一个参数是事件名，后边的参数是要传递的数据
三、在自定义事件中用一个参数来接收

<div id="app">
        父组件：{{num}}
        <chang-com @change="total"></chang-com> <!-- 定义一个自定义事件 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('chang-com',{

            template: '<div>\
                        <button @click="addbtn">+100</button>\
                        <button @click="cutbtn">-100</button>\
                        子组件：{{count}}\
                        </div>\
                        ',
            data: function(){
                return {
                    count :2000
                }
            },
            methods: {
                addbtn: function(){
                    this.count += 100
                    this.$emit('change',this.count)//点击的时候同时触发change事件
                },
                cutbtn: function(){
                    this.count -= 100
                    this.$emit('change',this.count)
                }
            }
        })
        var app = new Vue({
            el: '#app',
            data: {
                num: 2000
            },
            methods:{
                total: function(value){//这个value是传递过来的数据(this.count)
                    this.num = value    //
                }
            }
        })
    </script>

在组件中使用v-model

v-model是一个语法糖，实际上做了两个操作

• v-bind绑定一个value属性
• v-on指令给当前元素绑定input事件
  当触发input的时候，input事件就会自动接收传递过来的参数，并赋值给已经绑定的值
  demo

非父组件的通信

• 定义两个组件
• 在根组件的data中创建bus中介bus: new Vue()
• 在A组件中绑定事件（后续需要触发事件才能监听事件），添加要传递的内容
  -- 触发事件this.$root.bus.$emit('事件名',传递的数据 )
• 在B组件中created状态上监听事件this.$root.bus.$on(事件名,function(value){})

demo
父链
this.$parent
子链
this.$children，子组件一般有很多，可以给每个子组件添加ref属性,在父组件事件触发时，通过this.$refs.ref属性名.子组件的内容获取子组件的内容