Vue学习(二）—组件核心概念_vue学习(二)-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46178261/article/details/108104209

Vue学习—2020/8/19总结

ES6知识补充

ES6模块化

没有模块化的影响：全局变量污染、难以管理的依赖
常见的标准化标准：CommonJS、 ES6 Moudule、AMD、CMD、UMD…

导出的几种方式：

// 默认导出 {default: fn}， 函数可以是匿名函数
export default function (a, b) {
  return a + b;
}

// 具名导出(普通导出)，一个js文件只能有一个默认导出，可以有多个普通导出
// 普通导出, { double: fn}
export function double(a) {
  return a * 2;
}
export var n = 3;

// 最终导出：{ default: fn, double: fn, n: 3}

导入的几种方式：

// 导入模块
// 导入a.js的默认导出 import xxx from "./a.js";  xxx 为变量名
import sum from "./a.js"
console.log(sum(1,2)); // 3

// 导入a.js的普通导出 import {xxx} from "./a.js";
import {double} from "./a.js";
console.log(double(2)); // 4

//  导入所有
import * as obj from "./a.js"
console.log(obj); // { default:f(a,b), double: f double(q), n: 3}


//导入只需运行一下的代码 例如初始化的一些代码
import "./justRun.js"

组件概念

一个完整的网页是复杂的，如果将其作为一个整体来进行开发，将会遇到一下困难

代码凌乱臃肿
不易协作
难以复用

vue推荐使用一种更加精细的控制方案——组件化开发

所谓组件化，即把一个页面中区域功能细分，每一个区域成为一个组件，每个组件包含：

功能(JS代码)
内容(模板代码)
样式(CSS代码):需要构建工具的支撑

组件开发

创建组件

组件是根据一个普通的配置对象创建的，所以要开发一个组件，只需要写一个配置对象即可

该配置对象和vue实例的配置是几乎一样的

var myComp = {
  data() {
    return {
      // ...
    }
  },
  computed: {
    // ...
  },
  methods: {
    // ...
  },
  template: `...`
}

值得注意的是，组件配置对象和vue实例有一下几点差异：

无el
data 必须是一个函数，该函数返回的对象作为数据
由于没有el配置，组件的模板必须定义在template中

注册组件

注册组件分为两种方式，一种是全局注册，一种是局部注册

全局注册

一旦全局注册了一个组件，整个应用中任何地方都可以使用该组件

全局注册的方式是：

// 参数1：组件名称，将来在模板中使用组件时。会使用该名称
// 参数2： 组件配置对象
// 该代码运行后，既可在模板中使用组件
Vue.component("my-comp", myComp)

在模板中，就可以使用组件了

<my-comp/>
    或
<my-comp></my-comp>

但在一些工程化的大型项目中，很多组件都不需要全局使用。

比如一个登录组件，只有在登录的相关页面中使用，如果全局注册，将导致构建工具无法优化打包

因此，除非组件特别通用，否则不建议全局注册

局部注册

局部注册就是哪里要用到组件，就在哪里注册

应用组件

在模板中使用组件，把组件名当作HTML元素名使用即可。

但要注意以下几点：

组件必须有结束

组件可以自结束也可以用结束标记结束，但必须有结束
组件的命名
- 短横线命名法：kebab-case
- 大驼峰命名法：PascalCase
```
var otherComp = {
    components:{
        "my-comp":myComp,// 方式1
        "MyComp":myComp // 方式2
    }
}
```
实际上，使用小驼峰命名法camelCase也可以识别，但不符合官方要求的规范

使用PascalCase方式命名还有额外的好处，即可以在模板中使用两种组件名

var otherComp = {
    components:{
        "MyComp":myComp 
    }
}

模板中：

<!-- 可用 -->
<my-comp />
<MyComp />

因此，在使用组件时，为了方便，往往使用一下代码：

var MyComp = {
    // 组件配置
}
var OtherComp = {
    components: {
        MyComp // ES6速写属性
    }
}

组件树

一个组件创建好后，往往会在各种地方使用它。它可能多次出现在vue实例中，也可能出现在其他组件中。于是就形成了一个组件树

向组件传递数据

大部分组件都要完成自身的功能，都需要一些额外的信息

比如一个头像组件，需要告诉它头像的地址这就需要在使用组件时向组件传递数据

传递数据的方式有很多种，最常见的一种时使用组件属性component props

首先在组件中声明可以接受哪些属性：

var MyComp = {
    props:["p1", "p2", "p3"],
    // 和Vue实例一样，使用组件时也会创建组件的实例
    // 而组件的属性会被提取到组件实例中，因此可以在模板中使用
    template:`
<div>
{{p1}}, {{p2}}, {{p3}}
</div>
`
}

在使用组件时，向其传递属性：

var OtherComp = {
    components: {
        MyComp
    },
    data() {
        return {
            a:1
        }
    }
}