非父子（类似兄弟）通信-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提供数据

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

2子孙inject取得数据

inject:['color']

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

v-model原理：一个语法糖 

作用：数据双向绑定 

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

：value视图跟着数据变

@input数据跟着视图变

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

<input :value="msg" @input="msg=$event.target.value" type="text">

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

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

1表单类组件封装

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

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

<select :value="value" @change="handelChange"></select>
props:{value:string
}
methods:{handelChange(e){this.$emit('事件名'，e.target.value)}
}

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

2v-model简化代码

<BaseSelect :value="selected" @'事件名'="selectId=$event"></BaseSelect>

<BaseSelect v-model="selectId"></BaseSelect>