Vue2组件间通信

• 核心概念：5

• state

• mutations

• actions

• getters

• modules

插槽

适用场景:父子间组件通信 —(一般结构)

• 默认插槽

• 具名插槽

• 作用域插槽

2.进阶组件间通信

1)事件相关的深入学习

• 事件:事件已经学习过两种，第一种原生DOM事件，第二种自定义事件。

• 组件绑定原生DOM事件，并非原生DOM事件，而是所谓的自定义事件。

• 如果你想把自定义事件变为原生DOM事件，需要加上修饰符.native修饰

• 这个修饰符(.native)，可以把自定义事件【名字：原生DOM类型的】变为原生DOM事件，

EventTest组件

<button @click=“handler”>原生btn按钮

<Event1 @click.native=“handler1”>

---

<Event2 @click=“handler2” @xxx=“handler2”>

2)v-model实现组件通信？

• v-model：指令，可以收集表单数据【text、radio、checkbox、range】等等

• 切记：v-model收集checkbox需要用数组收集

v-model:实现原理 :value @input 还可以实现父子数据同步。

<CustomInput v-model="msg"></CustomInput>

相当于： <CustomInput :value="msg" @input="msg = $event"></CustomInput> 子组件触发的自定义事件必须是input,子代接收的props是value，否则v-model 不生效

子组件写法:<input :value="value" @input="$emit('input',$event.target.value)"/>

• $event可以作为子组件触发自定义事件传回来的参数

深入v-model

{{msg}}

深入v-model原理

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

{{msg}}

<CustomInput :value=“msg” @input=“msg = $event”>

---

子组件

input包装组件----{{value}}

<input :value=“value” @input=“$emit{(}^{\prime }inpu{t}^{\prime },$event.target.value)”/>

3)属性修饰符.sync，可以实现父子数据同步。

• 以后在elementUI组件中出现，实现父子数据同步。

• 和v-model实现组件通信类似

• 可以实现父子组件数据同步，该案例在子组件绑定自定义事件（update:money）

小明的爸爸现在有{{ money }}元

不使用sync修改符

<Child :money=“money” @update:money=“money = $event”>

使用sync修改符

---

子组件

小明每次花100元

<button @click=“$emit(‘update:money’,money - 100)”>花钱

爸爸还剩 {{money}} 元

4)$attrs与$listeners ----vue-helper 父子组件通信

• $attrs：组件实例的属性，可以获取到父亲传递的props数据（前提子组件没有通过props接收）

• $listeners：组件实例的属性，可以获取到父亲传递自定义事件（对象形式呈现）

• v-bind 可以直接赋予他一个对象，会把这些对象作为标签的属性

• v-for 可以直接赋予他一个对象，会把这些对象作为标签的事件，属性值需要为函数

• 以上两种用法不可以简写

自定义带Hover提示的按钮

<HintButton

type=“success”

icon=“el-icon-plus”

title=“我是中国人”

@click=“handler”

/>

子组件

添加

5)$children与$parent 可以实现父子组件通信

• ref:可以在父组件内部获取子组件—实现父子通信【可以使用子组件的数据和方法】

• $children:可以在父组件内部获取全部的子组件【返回数组】

• $parent:可以在子组件内部获取唯一的父组件【返回组件实例】

BABA有存款: {{ money }}

<button @click=“JieQianFromXM(100)”>找小明借钱100

<button @click=“JieQianFromXH(150)”>找小红借钱150

<button @click=“JieQianAll(200)”>找所有孩子借钱200

<button @click=“SendInfo”>我是baba

Son

儿子小明: 有存款: {{money}}

<button @click=“geiQian(50)”>给BABA钱: 50

Daughter

女儿小红: 有存款: {{money}}

给BABA钱: 100