Vue的组件

---

Vue的组件

组件的三大组成部分

• 结构<template>：只能有一个根元素
• 样式<style>：
  • 默认全局，影响所有组件
  • scoped下样式，只作用于当前组件
• 逻辑<script>：el根实例独有，data是一个函数，其他配置项一致。

组件样式冲突

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

• 全局样式：默认组件中的样式会作用到全局
• 局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件

语法：<style scoped></style>

scoped原理：

1. 给当前组件模板的所有元素，都添加上一个自定义属性data-v-hash值，区分开不同的组件。
2. css选择器后面，被自动处理，添加上了属性选择器div[data-v-hash值]

最终效果：必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用化

data函数

一个组件的data选项必须是一个函数，保证每个组件实例，维护独立的一份数据对象。

语法：

data(){
    return{
        属性名: 属性值，
    }，
}，

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

组件通信

组件通信，就是指组件与组件之间的数据传递。

• 组件的数据是独立的，无法直接访问其他组件的数据。
• 使用其他组件的数据，就需要组件通信

不同组件关系：

1. 父子关系
2. 非父子关系

对应通信方案：

1. 父子关系 —— props & $emit
2. 非父子关系 —— provide & inject 或 eventbus
3. 通用方案 —— vuex

父子通信

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

什么是prop

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

Prop作用：想子组件传递数据。

特点：

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

props校验

作用：为组件的prop可以指定验证要求，不符合要求，控制台会有错误提示，帮助开发者快速发现错误。

语法：

1. 类型校验：

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

2. 非空校验 / 默认值 / 自定义校验

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

3. prop传过来的数据（外部数据）不能直接改。

prop & data、单向数据流

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

区别：

• data的数据是自己的，可以随便改
• prop的数据是外部的，不能直接改，要最新单向数据流

单向数据流：父级prop的数据更新，会向下流动，影响子组件，这个数据流动是单向的。

非父子通信（拓展）

作用：非父子组件之间，进行简易消息传递。（复杂场景用Vuex）

event bus事件总线

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

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

2. 接收方监听Bus实例事件

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

3. 发送方触发Bus实例的事件

   Bus.$emit('sendMsg', 'this is sa message')
   

provide & inject

provide & inject作用：跨级共享数据。

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)
       }
   }