1.vuecli创建项目：

创建一个项目 | Vue CLI
先安装Vue CLI:

1
npm install -g @vue/cli

方法1：在要创建的项目所在的文件夹中使用：vue create 项目名，然后在选择要创建的Vue版本。
方法2：在要创建项目的所在位置使用: vue ui打开图形化界面来创建项目
2.Vue组件命令的时候，一定要使用大驼峰命名发，否则vueCli导入组
件的时候不成功。导入组件可以用。导入组件成功后使用导入的组件可以把大驼峰转化为小驼峰加下划线使用。
3.main.js进行的组件注册是全局注册。

  1. 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响
  2. 局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件

3.scoped原理

  1. 当前组件内标签都被添加data-v-hash值 的属性
  2. css选择器都被添加 [data-v-hash值] 的属性选择器

data为什么要写成函数

一个组件的 data 选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。
每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。

父子通信流程

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

image.png

父向子通信：

image.png
父向子传值步骤

  1. 给子组件以添加属性的方式传值
  2. 子组件内部通过props接收
  3. 模板中直接使用 props接收的值
1
2
3
4
5
1.props是properties的缩写
2.可以理解为javaScript中给每个组件声明了一个属性，通过:属性名的方法，将属性和data绑定起来，父组件
通过给属性赋值，从而达到给子组件传递信息的目的
2.组件的props可以为任意数量和任意类型
3.其属性赋值是通过外部父组件来赋值的，当父组件没有给某些属性赋值的时候为默认值

props校验完整写法

1
2
3
4
5
6
7
8
9
10
11
props: {
  校验的属性名: {
    type: 类型,  // Number String Boolean ...
    required: true, // 是否必填
    default: 默认值, // 默认值
    validator (value) {
      // 自定义校验逻辑
      return 是否通过校验
    }
  }
},

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）
2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

props&data的区别：

  • data 的数据是自己的  →   随便改
  • prop 的数据是外部的  →   不能直接改，要遵循 单向数据流

子组件向父组件传递信息：主要是通过事件冒泡来实现的
image.png
子向父传值步骤

  1. $emit触发事件，给父组件发送消息通知
  2. 父组件监听$emit触发的事件
  3. 提供处理函数，在函数的性参中获取传过来的参数
  4. Props | Vue.js

image.png

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

2.步骤

  1. 在一个js文件中创建一个都能访问的事件总线 （空Vue实例）
1
2
3
import Vue from 'vue'
const Bus = new Vue()
export default Bus

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

1
2
3
4
5
created () {
  Bus.$on('sendMsg', (msg) => {
    this.msg = msg
  })
}

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

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

image.png
这种通信实际上是通过总线也就是第三方vue来实现的，接受方使用$on方法在总线中注册事件（包括事件处理函数）或者说是注册监听器，然后发送方可以使用$emit调用接收方往总线中添加的事件，使用$emit方法调用总线中的事件的时候通过$emit的第二个参数就实现了传递数据了。简单来说就是接受数据的一方将要对数据的处理写入总线Vue中，发送数据的一凡通过$emit方法传递数据并调用方法进行处理。

非父子通信-provide&inject：

image.png

  1. 父组件 provide提供数据
1
2
3
4
5
6
7
8
9
10
export default {
  provide () {
    return {
       // 普通类型【非响应式】
       color: this.color, 
       // 复杂类型【响应式】
       userInfo: this.userInfo, 
    }
  }
}

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

1
2
3
4
5
6
export default {
  inject: ['color','userInfo'],
  created () {
    console.log(this.color, this.userInfo)
  }
}

4.注意

  • provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）
  • 子/孙组件通过inject获取的数据，不能在自身组件内修改

v-model:

提供数据的双向绑定

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

image.png
vue中$nextTick的用法(视图渲染完，操作dom)-CSDN博客
vue.nextTick()方法的使用详解（简单明了）_$nexttick-CSDN博客