一、非父子通信-event bus 事件总线

1.作用

非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)

2.步骤

1. 创建一个都能访问的事件总线 （空Vue实例）

   import Vue from 'vue' const Bus = new Vue() export default Bus
   

2. A组件（接受方），监听Bus的 $on事件

   created () {   Bus.$on('sendMsg', (msg) => {     this.msg = msg   }) }
   

3. B组件（发送方），触发Bus的$emit事件

   Bus.$emit('sendMsg', '这是一个消息')

4. 

3.代码示例

EventBus.jsimport Vue from 'vue'
const Bus  =  new Vue()
export default Bus
BaseA.vue(接受方)<template><div class="base-a">我是A组件（接收方）<p>{{msg}}</p>  </div>
</template>
​
<script>
import Bus from '../utils/EventBus'
export default {data() {return {msg: '',}},
}
</script>
​
<style scoped>
.base-a {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>
BaseB.vue(发送方)<template><div class="base-b"><div>我是B组件（发布方）</div><button>发送消息</button></div>
</template>
​
<script>
import Bus from '../utils/EventBus'
export default {
}
</script>
​
<style scoped>
.base-b {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>
App.vue<template><div class="app"><BaseA></BaseA><BaseB></BaseB> </div>
</template>
​
<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue' 
export default {components:{BaseA,BaseB}
}
</script>
​
<style>
​
</style>

4.总结

1.非父子组件传值借助什么？

2.什么是事件总线

3.发送方应该调用事件总线的哪个方法

4.接收方应该调用事件总线的哪个方法

5.一个组件发送数据，可不可以被多个组件接收

二、非父子通信-provide&inject

1.作用

跨层级共享数据

2.场景

3.语法

1. 父组件 provide提供数据

export default {provide () {return {// 普通类型【非响应式】color: this.color, // 复杂类型【响应式】userInfo: this.userInfo, }}
}

2.子/孙组件 inject获取数据

export default {inject: ['color','userInfo'],created () {console.log(this.color, this.userInfo)}
}

4.注意

• provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）

• 子/孙组件通过inject获取的数据，不能在自身组件内修改

三、v-model原理

1.原理：

v-model本质上是一个语法糖。例如应用在输入框上，就是value属性 和 input事件 的合写

<template><div id="app" ><input v-model="msg" type="text"><input :value="msg" @input="msg = $event.target.value" type="text"></div>
</template>

​

2.作用：

提供数据的双向绑定

• 数据变，视图跟着变 :value

• 视图变，数据跟着变 @input

3.注意

$event 用于在模板中，获取事件的形参

4.代码示例

<template><div class="app"><input type="text"  /><br /> <input type="text" /></div>
</template><script>
export default {data() {return {msg1: '',msg2: '',}},
}
</script> 
<style>
</style>

5.v-model使用在其他表单元素上的原理

不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model

底层处理的是 checked属性和change事件。

不过咱们只需要掌握应用在文本框上的原理即可

四、.sync修饰符（父子组件的双向绑定）

1.作用

可以实现 子组件 与 父组件数据 的 双向绑定，简化代码

简单理解：子组件可以修改父组件传过来的props值

2.场景

封装弹框类的基础组件， visible属性 true显示 false隐藏

3.本质

.sync修饰符 就是 :属性名 和 @update:属性名 合写

父组件

isShow.sync  => :isShow="isShow" @update:isShow="isShow=$event"

4.案例：

5、代码

父组件

<template><div class="app"><button @click="openDialog">退出按钮</button><!-- isShow.sync  => :isShow="isShow" @update:isShow="isShow=$event" --><BaseDialog :isShow.sync="isShow"></BaseDialog></div>
</template><script>
import BaseDialog from './components/BaseDialog.vue'
export default {data() {return {isShow: false,}},methods: {openDialog() {this.isShow = true// console.log(document.querySelectorAll('.box')); },},components: {BaseDialog,},
}
</script><style>
</style>

子组件

<template><div class="base-dialog-wrap" v-show="isShow"><div class="base-dialog"><div class="title"><h3>温馨提示：</h3><button class="close" @click="closeDialog">x</button></div><div class="content"><p>你确认要退出本系统么？</p></div><div class="footer"><button>确认</button><button>取消</button></div></div></div>
</template><script>
export default {props: {isShow: Boolean,},methods:{closeDialog(){this.$emit('update:isShow',false)}}
}
</script><style scoped>
.base-dialog-wrap {width: 300px;height: 200px;box-shadow: 2px 2px 2px 2px #ccc;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 0 10px;
}
.base-dialog .title {display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #000;
}
.base-dialog .content {margin-top: 38px;
}
.base-dialog .title .close {width: 20px;height: 20px;cursor: pointer;line-height: 10px;
}
.footer {display: flex;justify-content: flex-end;margin-top: 26px;
}
.footer button {width: 80px;height: 40px;
}
.footer button:nth-child(1) {margin-right: 10px;cursor: pointer;
}
</style>

五、ref和$refs

1.作用

        利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例

2.特点：

        查找范围 → 当前组件内(更精确稳定)

3.语法

        1.给要获取的盒子添加ref属性

<div ref="chartRef">我是渲染图表的容器</div>

        2.获取时通过 $refs获取 this.$refs.chartRef 获取

mounted () {console.log(this.$refs.chartRef)
}

4.代码示例

父级代码

<template><div class="app"><BaseChart></BaseChart></div>
</template><script>
import BaseChart from './components/BaseChart.vue'
export default {components:{BaseChart}
}
</script><style>
</style>

子代码

<template><div class="base-chart-box" ref="baseChartBox">子组件</div>
</template><script>
// yarn add echarts 或者 npm i echarts
import * as echarts from 'echarts'export default {mounted() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.querySelect('.base-chart-box'))// 绘制图表myChart.setOption({title: {text: 'ECharts 入门示例',},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20],},],})},
}
</script><style scoped>
.base-chart-box {width: 400px;height: 300px;border: 3px solid #000;border-radius: 6px;
}
</style>

六、异步更新 & $nextTick

1、 $nextTick：是等 DOM更新后,才会触发执行此方法里的函数体

语法: this.$nextTick(函数体)

this.$nextTick(() => {this.$refs.inp.focus()
})

注意：$nextTick 内的函数体 一定是箭头函数，这样才能让函数内部的this指向Vue实例

2、代码示例

<template><div class="app"><div v-if="isShowEdit"><input type="text" v-model="editValue" ref="inp" /><button>确认</button></div><div v-else><span>{{ title }}</span><button @click="editFn">编辑</button></div></div>
</template><script>
export default {data() {return {title: '大标题',isShowEdit: false,editValue: '',}},methods: {editFn() {// 1.显示文本框this.isShowEdit = true// 2.让文本框聚焦 （会等dom更新完之后 立马执行nextTick中的回调函数）// this.$nextTick(() => {//   console.log(this.$refs.inp)//   this.$refs.inp.focus()// })setTimeout(() => {this.$refs.inp.focus()}, 0)},},
}
</script><style>
</style>