组件通信方式：我们学习过的组件通信方式
第一种：props：父子组件通信
注意事件：
如果父组件给子组件传递数据（函数），本质其实是子组件给父组件传递数据
如果父组件给子组件传递的数据（非函数），本质就是父组件给子组件传递数据
书写方式：3种
['todos'] ,{type:'Array},{type:Array,default:[]}
晓提示：路由的props
书写形式：布尔值，对象 函数形式
第二种：自定义事件
适用于场景：子组件给父组件传递数据
$on $emit
第三种：全局事件总线$bus
适用于场景：万能
Vue.prototype.$bus=this;
第四种：pubsub-js，在react框架中使用较多（发布与订阅）
适用场景：万能
第五种：Vuex
适用于：万能
第六种：插槽
适用于场景：父子组件通信（一般结构）
默认插槽
具名插槽
作用域插槽
自定义事件深入：
事件：系统事件 click 双击 鼠标系列等
自定义事件
事件源 事件类型 事件回调
1：原生DOM---button可以绑定系统事件--click单击事件等等
2：组件标签--event1可以绑定系统事件（不起作用，因为属于自定义事件）-----.native（修饰符，可以把自定义事件变为系统 事件）
v-model 深入
是vue里边的指令，经常和表单元素一起使用，收集表单数据
v-mode实现原理：value与input事件实现的，而且还需要注意可以通过v-model实现父子组件数据同步
由此看出，v-model是v-bind和v-on:input的结合，即监听了表单的input事件，然后修改value属性对应的值
<template>
<div>
<input type="text"
:value="msg"
@input="bind">
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: ''
}
},
methods: {
bind () {
this.msg = event.target.value
}
}
}
</script>
1.v-model深入 父子组件通信
v-model`除了在输入表单上可以使用之外，在组件上也可以使用，以实现父子组件的双向数据绑定
// -------------------------------父组件
<template>
<div>
<!-- 在父组件中用v-model相当于，v-bind绑定了value，以及执行了v-on:input事件 -->
<child v-model="flag"></child>
<div>{{flag}}</div>
</div>
</template>
<script>
export default {
data () {
return {
flag: ''
}
},
components: {
child
}
}
</script>
// -------------------------------子组件
<template>
<div>
<div class="btn" @click="confirm">确定</div>
</div>
</template>
<script>
export default {
// 用props接收父组件传递的value值，从而实现双向数据绑定
props: {
value: {
type: Boolean,
default: true
}
},
methods: {
// 通过$emit触发父组件的input事件，并将第二个参数作为值传递给父组件
confirm () {
this.$emit('input', false)
}
}
}
</script>
1.2v-model添加model选项
以上这种方式实现的父子组件的v-model通信，限制了popos接收的属性名必须为value和emit触发的必须为input，这样容易有冲突，特别是在表单里面。所以，为了更优雅的使用v-model通信，可以在子组件中使用model选项
// 子组件
<template>
<div>
<div class="btn" @click="confirm">确定</div>
</div>
</template>
<script>
export default {
// model选项用来避免冲突,prop属性用来指定props属性中的哪个值用来接收父组件v-model传递的值,例如:这里用props中的flag1来接收父组件传递的v-model值;event属性可以理解为父组件@input的别名，从而避免冲突，即emit时要提交的事件名。
model: {
prop: 'flag1',
event: 'changed'
}
// 用props接收父组件传递的value值，从而实现双向数据绑定
props: {
value: {
type: Boolean,
default: true
}
},
methods: {
// 通过$emit触发父组件的input事件，并将第二个参数作为值传递给父组件
confirm () {
this.$emit('input', false)
}
}
}
</script>
2.sync修饰符
组件通信方式的一种，可以实现父子组件数据同步，
：mony.sync=‘money’
代表父组件给字符串传递props【money】，给当前子组件绑定一个自定义事件（update：money）
3.$attrs和$listeners
$attrs会接受到父组件通过props 传过来的值
如果用props接收，则$attrs则会接收不到，如果在子组件内部标签身上全部接受则可以 v-bind=$attrs全部接受，单独接受则可以：title=‘$attrs.title'
$lisenters可以获取到父组件给子组件传递的自定义事件，如果在子组件内部标签身上接受则可以eg：v-on：$listeners
4.$children与$parent
$children:可以获取到当前组件中全部的子组件，并返回一个数组，可以调用子组件的数据和方法，切记别用数组名加括号下标值去引用，不确定数组是第几项是谁
$parent：可以获取到当前组件的父组件，然后就可以调用它的数据和方法
5.混入mixin
如果项目当中很多结构类似功能，想到组件复用
如果项目当中的组件js业务逻辑相似，想到mixin，可以把多个组件js部分重复相似的地方封装，对外暴露的对象，可以放置组件重复JS业务逻辑
在组件中配置：minxin：【mymixin】
6.作用域插槽
父子组件通信，通信的是结构
子组件的数据是父组件给的，子组件需要 把父组件给的数据进行回传*（每一条），父组件写入结构
7.清除数据的小方法
Object.assign(this._data,this.$options.data())
8.深度选择器
1.scoped属性的作用
对于某一个组件，如果style添加上scoped属性，给当前子组件的结构上都添加上了data-v-xxx自定属性
会发现vue是通过属性选择器，给需要添加的元素添加样式
2.子组件的根标签（拥有父组件当中自定义属性：-一样的），如果子组件的根节点，和父组件中书写的格式（H5）相同，则也会添加上相应样式
3.注意：如果父组件的样式（scoped）而且还想影响到子组件的样式，像这种情况可以使用深度选择器
深度选择器可以实现样式穿透：
原生css >>>
less /deep/
scss ::v-deep
标签：Vue,自定义,通信,事件,props,组件,input,model From： https://www.cnblogs.com/luckily7/p/17222359.html