组件通信之关系型

组件通信之关系型

props

1:父组件绑定自定义属性，并动态赋值

​		<parent :msg="msg" />

2:子组件通过props属性接受msg

​		props:['msg']

注意：再子组件中不能修改prop[msg]，因为数据是父组件的，vue中props出啊之单向下行绑定，如果子组件中修改prop vue应用数据层混乱，违反单向数据流。

通电：子组件怎么修改父组件数据

$emit

1:父组件中创建自定义事件，并绑定事件处理函数
  <parent @shijian="handle" />
2:子组件中通过$emit 触发事件 shijian 并给handle函数传入实参
 this.$emit('shijian','参数js任意类型数据')
3：组组件中，将接收到的数据保存到data中

注意：父组件是可以更改保存的字段的

v-model

怎么再组件上使用v-model代替自定义事件和属性

1：使用组件v-model="prop"
	<parent v-model="checked" />
2:再组件中通过model 属性 完成

model：{
	prop:'check',
	event:'change'
}

解决：checkbox即是单选又是多选意义紊乱的问题。。。

如果是单选或者是多选 用v-model代替了$emit+props的方式

listen

在组件上监听原生事件，使用.navctive修饰符，可能会失效

$listen 实现监听

.sync

解决prop双向绑定，父子组件都没有响应的问题。可以通过.sync

$parent

通过$parent获取父组件的组件实例

• 1：可以间接获取组件上所有响应式数据
• 2：获取组件上所有函数

$children

$children返回当前组件的所有子组件实例的集合

通过这种方式获取目标子组件属性

• 1：获取目标组件实例的所有响应式数据和方法

$refs

如果将ref绑定到组件上

• 通过this.$refs.refval获取组件实例
• 间接获取组件实例上所有响应式数据和方法

如果ref绑定到:dom上

• this.$refs.refval获取dom元素并操作dom