Vue 组件通信及进阶语法

一、scoped 样式冲突

注意点：
① 结构：只能有一个根元素；
② 样式：组件中定义的样式默认是全局生效的，会影响到所有组件，而 scoped 属性下的样式可以作用于当前组件；
③ 逻辑：el 是根实例所独有的，data 是一个函数。

默认情况下，写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题，而组件应该有着自己独立的样式，我们可以给组件加上 scoped 属性，让样式只作用于当前组件。

<style scoped>
</style>

scoped 原理：给当前组件中的所有元素都添加一个自定义属性（data-v-hash），不同的哈希值用于区分不同的组件！

二、data 是一个函数

在一个组件里面，data 选项必须是一个函数，保证每个组件实例维护独立的一份数据对象。 每次创建新的组件实例，都会执行一次 data 函数，得到一个新对象，各个对象之间互不影响。

三个实例对象各自独立，互不影响！

三、组件通信

组件通信就是指组件与组件之间的数据传递。 组件之间的数据是独立的，无法直接访问其他组件的数据，想要用其他组件的数据，就必须要组件通信。

组件关系分为父子关系和非父子关系：

1. 父子通信

父组件通过 props 将数据传递给子组件，子组件不能直接修改父组件中的数据，而是利用 $emit 通知父组件进行修改更新。

<!--App.vue-->
<template><div class="App"><Son :title="myTitle" @changeTitle="handleChange"></Son></div>
</template><script>
import Son from './components/Son.vue';
export default {data() {return {myTitle: '栈老师不回家'}},components: {Son},methods: {handleChange(newTitle) {this.myTitle = newTitle}}
}
</script><style scoped>
.App {width: 600px;height: 600px;background-color: rgb(193, 230, 248);margin: 0 auto;padding: 20px;
}
</style>

<!--Son.vue-->
<template><div class="son">{{ title }}<button @click="changeFn">修改</button></div> 
</template><script>
export default {props: ['title'],methods: {changeFn() {this.$emit('changeTitle', '新数据')}}
}
</script><style>
.son {width: 200px;height: 200px;background-color: #f8dd30;margin: 0, auto;
}
</style>

通过自定义属性和自定义事件来实现父子之间的通信。子组件通过 $emit 向父组件发送消息通知，第一个参数是父组件中自定义的监听事件，第二个参数是修改的新数据，父组件通过 @change Title 监听消息，并做出回应，即修改数据。

1.1 props 校验

props 用于向子组件传递数据，并且可以传递任意类型、任意数量的数据。

为了保证组件的正常运行，组件的 props 不可以乱传。我们可以给组件的 props 指定验证要求，不符合要求，控制台就会有错误提示，可以帮助开发者快速发现错误。

① 类型校验

props: {校验的属性名: 类型 //Number、String、Boolean、Array、Object...
}

② 更详细的校验

props: {校验的属性名: {type: 类型, //Number、String、Boolean、Array、Object...required: true, //是否必填default: 默认值, //默认值validator(value) { //value就是传过来的属性名//自定义校验逻辑return true //true通过校验，false不通过校验}}
} 

1.2 props 比较 data

共同点：都可以给组件提供数据。

区别：data 的数据是自己的，可以随便改；props 的数据是外部的，不能直接改，要遵循单向数据流原则，通知其父组件进行修改。

单向数据流：父组件的 props 更新，会单向向下流动，从而影响到子组件。

count++ 是 count 加 1 并重新赋值，会直接修改 count 的值，而 count + 1 并不会重新赋值，count 的值也不会被改变，所以对于 props 里的数据，不要使用 ++，直接让它 + 1 通知父组件即可！

谁的数据谁负责，数据一般提供在公共的父组件中！

2. 非父子通信

2.1 event bus

event bus 用于非父子组件之间，进行简易的消息传递。

① 创建一个双方都能访问到的事件总线（空 Vue 实例）→ utils/EventBus.js

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

② A 组件（接收方），监听 Bus 实例的事件

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

③ B 组件（发送方），触发 Bus 实例的事件

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

发送方发送消息，从而触发 Bus，而接收方时刻监听着 Bus，Bus 一旦被触发，接收方立马就可以接收到消息！

完整代码如下：

//EventBus.js
//创建一个都能访问到的事件总线（空的Vue实例）
import Vue from "vue";
const Bus = new Vue()
export default Bus

//BaseA.vue
<template><div class="baseA">我是A组件(接收方)<div>{{ msg }}</div></div></template><script>import Bus from '@/utils/EventBus';export default {data() {return {msg: ''}},created() {//订阅消息Bus.$on('sendMsg', (msg) => {this.msg = '收到消息了：'+ msg})}}</script><style scoped>.baseA {width: 200px;height: 150px;padding: 10px;margin-top: 10px;border: 3px solid #000;border-radius: 5px;font-size: 20px;}</style>

<template><div class="baseB">我是B组件(发布方)<button @click="publish">发布通知</button></div>
</template><script>
import Bus from '@/utils/EventBus';
export default {methods: {publish() {//发送方通过触发事件的方式发布消息Bus.$emit('sendMsg', '栈老师回家')}}
}
</script><style scoped>
.baseB {width: 200px;height: 150px;padding: 10px;margin-top: 10px;border: 3px solid #000;border-radius: 5px;font-size: 20px;
}
</style>

发送方发送的消息，可以被多个接收方订阅！

2.2 provide-inject

跨层级（孙子和爷爷）之间的通信用 provide-inject。

//发送方，爷爷
provide() {return {color: this.color, //简单类型，非响应式userInfo: this.userInfo //复杂类型，响应式}
},
data() {return {color: 'blue',userInfo: {name: '栈老师',age: 20}}
}

//接收方，孙子
inject: ['color', 'userInfo']

使用 provide-inject 共享数据的时候，通常以复杂类型的形式，把数据包装成一个对象进行传递，这样可以保证数据的响应式。

四、进阶语法

1. v-model 详解

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

作用：提供数据的双向绑定。

注意：$event 用于在模版中获取事件的形参。

<!--两个input作用一样-->
<div class="App"><input v-model="msg" type="text"><input :value="msg" @input="msg=$event.target.value" type="text">
</div>

$event.target.value 就是输入框中的值！

表单类组件封装：

① 父传子：数据应该是父组件 props 传递过来的，v-model 拆解绑定数据。
② 子传父：监听输入，子传父传值给父组件修改。

应用场景举例：此下拉框中所有的数据都来自它的父组件，所以数据是不能直接修改的，子组件中也不能使用 v-model，因为 v-model 会修改数据，解决办法就是拆解 v-model，让 value 和 @change 拆开写。

<select :value="cityId" @change="handleChange">
...
</select>

props: {cityId: String
},
methods: {handleChange(e) {this.$emit('父组件中的事件名', e.target.value)}
}

<!--父组件接收-->
<BaseSelect :cityId="selectId" @事件名="selectId=$event"/>

2. sync 修饰符

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

特点：props 属性名可以自定义，非固定为 value。

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

:属性名.sync，本质上就是 :属性名和 @update:属性名的合写。

<!--父组件与子组件通过:visible.sync即可实现数据的双向绑定-->
<BaseDialog :visible.sync = "isShow"/>

//子组件正常用props接收数据，emit发出修改申请
props: {visible: Boolean
},
methods: {close() {this.$emit('update:visible', false) //'update:属性名', 修改后的数据}
}

3. ref 和 $refs

作用：ref 和 $refs 用于获取 dom 元素或组件实例。

查询范围：当前组件内（更精准确定）。

① 获取 dom 元素

<!--给目标标签添加ref属性-->
<div ref="chartRef">我是渲染图标的容器</div>

//dom渲染完成后（mounted），通过this.$refs.属性值，获取目标标签
mouted() {console.log(this.$refs.chartRef)
}

② 获取组件

<!--给目标组件添加ref属性-->
<BaseForm ref="baseForm">我是一个组件</BaseForm>

//使用this.$refs.baseForm可以获取目标组件
this.$refs.baseForm.组件方法()

获取到目标组件后，就可以直接调用组件对象里面的方法！

4. $nextTick

需求：点击编辑，编辑框自动显示并聚焦。

this.isShowEdit = true //显示输入框
this.$refs.inp.focu() //获取焦点

问题：以上代码并不能立刻获取焦点。

原因：Vue 是异步更新（提升性能）。并不会读一行就执行一行，它要等全部代码都读完了才开始执行，所以此处 dom 还没更新出来，就去获取焦点，显然是不可能成功的。

$nextTick：等 DOM 更新后，才会触发执行此方法里的函数体。

将获取焦点的操作放在 $nextTick 里面就可以了：

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