组件通信

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

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

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

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

        父组件：{{num}}
         
    
    
    

在组件中使用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属性名.子组件的内容获取子组件的内容