【VUE2】第三期——样式冲突、组件通信、异步更新

1 scoped解决样式冲突

问题：

写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

解决方法：

可以给组件加上scoped 属性,可以让样式只作用于当前组件

如：

<style scoped>

</style>

scoped原理：

自动执行：

当前组件内标签都被添加data-v-hash值 的属性

css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果:

必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

2 data写法

一个组件的 data 选项必须是一个函数

目的是为了：保证每个组件实例，维护独立的一份数据对象

每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象

如：

<script>
export default {
  data: function () {
    return {
      count: 100,
    }
  },
}
</script>

3 组件通信

总结：

父子通信：

1.props & $emit 父向子传值，子通知父改值 3.1

1.1 v-model简写（不可自定义属性值） 5.1.2

1.2 sync简写（可自定义属性值） 5.1.3

2.ref & $refs 父主动拿子的方法与属性 6.2

非父子通信：

1.event bus 事件总线（任意组件） 3.2.1

2.跨层级通信（同一家族组件） 3.2.2

3.1 父子关系

父组件通过 props 将数据传递给子组件
子组件利用 $emit 通知父组件修改更新

3.1.1 父向子传值 props

步骤：

给子组件以添加属性的方式传值
子组件内部通过props接收
模板中直接使用 props接收的值

App.vue（父组件）：

<template>
  <!-- 主体区域 -->
  <section id="app">
    <!--第一步：给子组件挂上list属性，并将值赋值给list属性-->
    <TodoMain :list="list" @del="del"></TodoMain>
  </section>
</template>

<script>
//...
  data() {
    return {
      list: [
        {id: 1, content: "吃饭"},
        {id: 2, content: "睡觉"},
        {id: 3, content: "打豆豆"}
      ],
    }
  },
 
 
}
</script>

TodoMain.vue（子组件）：

注意：此处props为简略用法，完整写法见下文4.2 props校验完整写法

<template>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <!--第三步：直接使用list变量-->
      <li class="todo" v-for="(item, index) in list" :key="item.id">
        <!--...-->
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  //第二步：props接收数据（简略写法）
  props: ["list"],
}
</script>

3.1.2 子向父传值 $emit

（此处为子通知父，父为被动，下文中的$refs为父主动拿子）

步骤

$emit触发事件，给父组件发送消息通知

父组件监听$emit触发的事件

提供处理函数，在函数的性参中获取传过来的参数

TodoMain.vue（子组件）：

<template>
  <!-- 列表区域 -->
  <section class="main">
    <button @click="del(item.id)" ></button>
  </section>
</template>

<script>
export default {
//...
  methods: {
    dela(id) {
      //第一步：触发delb事件
      this.$emit("delb", id1)
    }
  }
}
</script>

App.vue（父组件）：

<template>
  <!-- 主体区域 -->
  <section id="app">
    <!--监听子组件触发的delb事件，监听到后执行delc函数，并将子组件传过来的id1值用id2接收-->
    <TodoMain @delb="delc"></TodoMain>
  </section>
</template>

<script>
//...
export default {
  //...
  methods: {
    delc(id2) {
      console.log(id2)
    },
  },

}
</script>

此为最基本写法，可以进一步化简：使用v-model或sync修饰符，具体见 5 v-model原理

3.2 非父子关系

3.2.1 event bus 事件总线

（任意两个组件之间的通信）

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

Event Bus（事件总线）可以有多个发送方与多个接收方

第一步：创建事件总线实例：

首先创建一个新的 Vue 实例作为事件总线，通常命名为 eventBus

这个实例就像一个中央枢纽，负责管理所有的事件

因为 Vue 实例本身具有 $on（监听事件）、$emit（触发事件）和 $off（移除事件监听器）方法，所以可以利用这些方法来实现事件的发布和订阅

// EventBus.js
import Vue from 'vue'

const Bus = new Vue()

export default Bus

在使用Bus事件总线时，需要先导入Bus这个实例对象

import Bus from '../utils/EventBus'

第二步：订阅事件（监听事件）：

在需要接收数据或响应某个事件的组件中，使用 Bus.$on 方法来监听特定的事件

$on 方法接受两个参数：

第一个参数是事件名称（字符串）

第二个参数是当事件触发时要执行的回调函数

// 组件 A 中监听事件
Bus.$on('sendMsg', (msg) => {
  this.msg = msg
})

第三步：发布事件（触发事件）：

在需要发送数据或通知其他组件的组件中，使用 eventBus.$emit 方法来触发特定的事件

$emit 方法的参数：

第一个参数是事件名称（必须与要监听的事件名称一致）

后面参数不限制个数及数据类型，这些参数会传递给监听该事件的回调函数

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

第四步：取消事件监听（移除事件监听器）：

（选学）

在组件销毁或不再需要监听事件时，可以使用 Bus.$off 方法来移除事件监听器，防止内存泄漏

Bus.$off([event, callback])

参数说明：

event（可选）：要移除的事件名，可以是一个字符串或一个包含多个事件名的数组。如果省略该参数，则会移除所有事件监听器

callback（可选）：要移除的特定回调函数。如果省略该参数，则会移除该事件名下的所有回调函数

3.2.2 跨层级共享数据 provide&inject

（父子、爷孙等之间的通信）

父组件 provide提供数据：

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

子/孙组件 inject获取数据：

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

注意：

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

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

inject中的属性值值也可以写成对象形式，可以设置的值：

from 用于指定从祖先组件注入的属性名。如果不使用 from，则默认使用当前定义的属性名作为注入的属性名

default 用于指定注入属性的默认值，当祖先组件没有提供对应的属性时，会使用这个默认值

      inject: {
        // 使用 from 指定注入属性的来源名称
        myUserInfo: {
          from: 'userInfo',
          // 设置默认值
          default: {
            name: '默认姓名',
            age: 0
          }
        },
        // 没有使用 from，默认使用当前属性名注入
        someValue: {
          default: '默认值'
        }
      },

4 props

4.1 介绍

定义：

组件上注册的一些自定义属性

作用：

向子组件传递数据

特点：

可以传递 任意数量 的prop
可以传递 任意类型 的prop

4.2 props校验完整写法

语法：

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

示例：

<script>
export default {
  // 完整写法（类型、默认值、非空、自定义校验）
  props: {
    w: {
      type: Number,
      //required: true,
      default: 0,
      validator(val) {
        // console.log(val)
        if (val >= 100 || val <= 0) {
          console.error('传入的范围必须是0-100之间')
          return false
        } else {
          return true
        }
      },
    },
  },
}
</script>

注意：

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写。如果是复杂类型的值，则需要以函数的形式return一个默认

5 v-model原理

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>

注意：

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

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

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

5.1 应用：表单类组件封装

5.1.1 不用v-model的写法

（此处就是父子组件通讯的方法 3.1）

App.vue

<template>
  <div class="app">
    <BaseSelect :selectId="selectId" @changeCity="selectId = $event"></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
  data() {
    return {
      selectId: '102',
    }
  },
  components: {
    BaseSelect,
  },
}
</script>

<style>
</style>

BaseSelect.vue

<template>
  <div>
    <select :value="selectId" @change="selectCity">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">广州</option>
      <option value="105">深圳</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    selectId: String,
  },
  methods: {
    selectCity(e) {
      this.$emit('changeCity', e.target.value)
    },
  },
}
</script>

<style>
</style>

5.1.2 用v-model的写法

注意：使用前需要先基于5.1.1的代码稍作修改

App.vue

<template>
  <div class="app">
    <!--1.给子组件挂在的属性名为：value 2.监听input事件-->
    <BaseSelect :value="selectId" @input="selectId = $event"></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
  data() {
    return {
      selectId: '102',
    }
  },
  components: {
    BaseSelect,
  },
}
</script>

<style>
</style>

BaseSelect.vue

<template>
  <div>
    <!--绑定value值-->
    <select :value="value" @change="selectCity">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">广州</option>
      <option value="105">深圳</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    //接收value值
    value: String,
  },
  methods: {
    selectCity(e) {
      //更改所触发的事件为input
      this.$emit('input', e.target.value)
    },
  },
}
</script>

<style>
</style>

完成上述修改后，可以对父组件（App.vue）中的代码进行简化：

原：

<BaseSelect :value="selectId" @input="selectId = $event"></BaseSelect>

改：

<BaseSelect v-model="selectId" ></BaseSelect>

此种方法缺点也显而易见，固定死了属性名必须传value ，

以下方法可以自定义属性名

5.1.3 sync 修饰符

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

<!--父组件-->
<!-- .sync写法 -->
<BaseDialog :visible.sync="isShow" />
--------------------------------------
<!-- 完整写法 -->
<BaseDialog :visible="isShow" @update:visible="isShow = $event" />

对比一下上面的v-model

:value="" 变成了 :属性名=""

@事件类型="" 变成了 @update:属性名=""

因此在组件中可以使用自定义属性名了，

但是在子组件触发的事件变成了 update:属性名

//子组件
props: {
  visible: Boolean
},

this.$emit('update:visible', false)

除此之外其他与上述一样，本质上还是最基本的props、$emit通信

6 ref 与 $refs

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

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

而之前用document.querySelect('.box') 获取的是整个页面中的盒子

6.1 获取dom元素

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

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

2.恰当时机，通过 $refs获取 this.$refs.xxx 获取

console.log(this.$refs.chartRef)

恰当时机：指的是页面渲染完（mouted时期及以后）

6.2 获取组件

1.给目标组件添加ref属性

<BaseForm ref="baseForm"></BaseForm>

2.恰当时机，通过 this.$refs.xxx 获取目标组件

this.$refs.baseForm.组件方法()

this.$refs.baseForm.属性名

7 Vue异步更新与$nextTick

需求：

编辑标题, 编辑框自动聚焦

点击编辑，显示编辑框
让编辑框，立刻获取焦点

代码：

<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() {
        // 显示输入框
        this.isShowEdit = true  
        // 获取焦点
        this.$refs.inp.focus() 
    }  },
}
</script>

问题：

"显示之后"，立刻获取焦点是不能成功的！

原因：Vue 是异步更新DOM (提升性能)

解决方案：

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

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

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

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