（Vue2）非父子通信、v-model原理

非父子（类似兄弟）通信-event bus事件总线

1创建一个都能访问到的事件总线->utils/EventBus.js

import Vue from 'vue'
const Bus=new Vue()
exports default Bus

2A组件监听Bus实例的事件->components/BaseA(接收方)

注：都要导入

import Bus from '../utils/EventBus'

created(){
  Bus.$on('sendMsg',(msg)=>{
    console.log(msg)
  })
}

3B组件触发Bus实例的事件->components/BaseB(发布方)

clickSend（）{
  Bus.$emit('sendMsg','你真棒！')
}

非父子（类似爷孙）通信-provide&inject：跨层级共享数据

1父组件provide提供数据

provide(){
  return{
    color:this.color
  }
}

2子孙inject取得数据

inject:['color']

注：在vue中，单引号和双引号都可以用来定义字符串。vue官方文档推荐双引号来表示字符串，单引号来表示键值。

v-model原理：一个语法糖 

作用：数据双向绑定 

应用与输入框：value属性和input事件的合写

：value视图跟着数据变

@input数据跟着视图变

$event.target用于在模板中获取被触发事件元素

表单类组件封装 &v-model简化代码

表单通常封装成组件，封装成组件了就涉及组件通信

1表单类组件封装

父传子：数据是父组件props传递过来的  v-model拆解绑定数据   下拉菜单：value @change

子传父：监听输入，改变传值给父组件

//父值影响子视图，子视图变触发handelChange事件
props:{
  cityId:string//父传值过来
}
methods:{
  handelChange(e){
    this.$emit('事件名'，e.target.value)//子视图变化值传给父
  }
}

注：父传子的键必须为value。因为v-model就是value属性和事件的合写

2v-model简化代码

//父组件监测到子传值事件，将值和selectId双向绑定

//化简之前的代码中的cityId全部替换成value

（父子都双向绑定，父如常用v-model，子v-model分开写，数据键名改为value，触发事件功能为向父发改变后的值）