Vue组件通信

1. props

• 适用场景：父子组件通信
• 注意事项：如果父组件给子组件传递数据（函数），本质是子组件给父组件传递数据
  如果父组件给子组件传递的数据（非函数），本质是父组件给子组件传递数据
• 书写方式：3种

  ['todos'],{type:Array},{type:Array,default:[]}
  

小提示：路由的props
书写形式：布尔值、对象、函数

2. 自定义组件

适用场景：子组件给父组件传递数据
$on $emit

<Todos @erha="handler">
<Todos ref='erha'>
mounted(){
  this.$refs.erha.$on('xx',callBack)
}

3. 全局事件总线

使用场景：万能

Vue.prototype.$bus = this;

4. pubsub.js 在react中使用比较多（发布与订阅）

使用场景：万能

5. Vuex

使用场景：万能

6. 插槽

适用场景：父子组件通信
默认插槽
具名插槽
作用域插槽:子组件的数据来源于父组件，但是子组件决定不了自身结构与外观。
父页面代码：

<List :todos="todos">
    <!-- 子组件决定不了自身结构与外观 -->
    <template slot-scope="{todo,$index}">
        {{$index}}---{{todo}}
    </template>
</List>

子页面代码：

<li v-for="(item,index) in todos" :key="index">
    <!-- 作用域插槽 -->
    <slot :todo="item" :$index="index">
</li>
props" {
    todos: Array
}

7. v-model

• v-model：指令，可以收集表单数据【text、radio、checkbox、range】等等
• 切记：v-model收集checkbox需要用数组收集
• 实现原理 :value @input 还可以实现父子数据同步。
• 原生dom当中有oninput事件，当文本元素内容发生变化时候会发出一次回调。

用:value @input实现v-model功能

<input value="msg" @input="msg = $event.target.value" />
<span>{{msg}}</span>

父页面代码：

<!-- @input 是自定义事件 -->
<CustomInput :value="msg" @input="msg=$event" />
<!-- 或者直接写成 -->
<CustomInput v-model="msg" />

子页面代码：

<!-- @input 给原生DOM绑定原生DOM事件 -->
<input :value="value" @input="$emit('input',$event.target.value)" />
export default {
    props:['value']
}

8. 属性修饰符.sync

适用场景：可以实现父子数据同步
父页面代码：

<!-- 
    :money 父组件给子组件传递props 
    @update:money 给子组件绑定的自定义事件，只不过名字叫update:money
-->
<child :money="money" @update:money="money = $event.target.value" />
<!-- 
    :money.sync含义：
    1. 父组件给子组件传递props 
    2. 给子组件绑定的自定义事件，只不过名字叫update:money
-->
<child :money.sync="money" />

子页面代码：

<span>{{money}}</span>
<button @click="$emit('update:money'), money-100"></button>
export default {
    props:['money']
}

9. $attrs与$listeners ----vue-helper

适用场景：父子组件通信

• $attrs：组件实例的属性，可以获取到父亲传递的props数据（前提子组件没有通过props接受）
• $listeners：组件实例的属性，可以获取到父亲传递自定义事件（对象形式呈现）

父页面代码：

<HintButton type="success" icon="el-icon-delete" size="mini" title="提示按钮" @click="handler"></HintButton>
methods: {
    // 回调事件
    handler() {}
}

子页面代码：

<a :title="title"></span>
<el-button v-bind="$attrs" v-on="$listeners"></el-button>
export default {
    props:['money']
}

10. $children与$parent

适用场景：可以实现父子组件通信
ref:可以在父组件内部获取子组件—实现父子通信
$children:可以在父组件内部获取全部的子组件【返回数组】
$parent:可以在子组件内部获取唯一的父组件【返回组件实例】

父页面代码：

<button @click="getMoneyFromXM(100)">找小明借钱</button>
<button @click="getMoneyFromXH(150)">找小红借钱</button>
<button @click="getMoneyFromAll(200)">找子女借钱</button>
<son ref="xm" />
<daughter ref="xh" />
export default {
    data() {
        return {
            money: 3000
        }
    },
    methods: {
        getMoneyFromXM(money) {
            this.money += money;
            this.$refs.xm.money -= money;
        },
        getMoneyFromXH(money) {
            this.money += money;
            this.$refs.xh.money -= money;
        },
        getMoneyFromAll(money) {
            this.money += money;
            this.$children.forEach(item => {
                item.money -= money;
            })
        }
    }
}

子页面son代码：

<button @click="giveMoney(50)">找子女借钱</button>
export default {
    data() {
        return {
            money: 3000
        }
    },
    methods: {
        giveMoney(money) {
            this.money -= money;
            this.$parent.money += money;
        }
    }
}

mixin

myMixin.js

methods: {
    giveMoney(money) {
        this.money -= money;
        this.$parent.money += money;
    }
}

子页面daughter代码：

<button @click="giveMoney(50)">找子女借钱</button>
import myMixin from 'myMixin'
export default {
    data() {
        return {
            money: 3000
        }
    },
    mixins: [myMixin]
}

事件相关的深入学习

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

原生DOM事件

<button @click="handler"></button>
<Event1 @click.native="handler1"></Event1>

自定义事件

<Event1 @xxx="handler1"></Event1>

父

<Event1 @click="handler1" @xxx="handler1"></Event1> 

子

<button @click="$emit('click','自定义事件click')"> 
<button @click="$emit('xxx','自定义事件xxx')"> 

组件绑定原生DOM事件，并非原生DOM事件，而是所谓的自定义事件。
如果你想把自定义事件变为原生DOM事件，需要加上修饰符.native修饰

ck="handler1" @xxx="handler1"></Event1> 

子

<button @click="$emit('click','自定义事件click')"> 
<button @click="$emit('xxx','自定义事件xxx')"> 

组件绑定原生DOM事件，并非原生DOM事件，而是所谓的自定义事件。
如果你想把自定义事件变为原生DOM事件，需要加上修饰符.native修饰
这个修饰符，可以把自定义事件【名字：原生DOM类型的】变为原生DOM事件，