冇事来学系--Vue2.0 组件开发详讲（上）

---

theme: scrolls-light

「这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战」。

组件化开发

根据封装的思想，把页面上可重复用的UI结构封装为组件，从而方便项目的开发和维护

组件-->实现应用中局部功能代码和资源的集合

vue支持组件化开发，组件的后缀名是.vue。每个.vue组件都由3部分构成：

1. template-->组件的模板结构 (DOM标签)

template标签只起到包裹的作用，不会被渲染成真实的元素

<template> <div class="test-box"> <h3>这是用户自定义的组件</h3> <div>用户名：{{ username }}</div> <button @click="changeName">修改用户名</button> </div> </template>

注意：在template标签中， 只允许存在一个根元素 (所以template里面要加一个div作为根元素包裹其他元素)

2. script--> 组件的JavaScript行为

```js // 注意：在组件中，script标签内必须写 默认导出 的语法(固定格式，一定要写) // export default {}
export default {

// 注意：组件中的data不能像之前一样指向一个对象，而是一个函数 // 目的是防止组件被复用的时候产生数据的关联关系，从而造成干扰 data(){ // 当前组件的data数据源 return { // 返回值return一个存放数据的对象 username: 'zhangsan' }
}, methods: {
console.log(this) // 这里的this指向的是当前Vue组件的实例对象 changeName(){ this.username = 'lisi' // data方法中的username是当前组件的实例对象中的一个属性，可以通过 "对象.属性名" 来调用 } }

// 当前组件的侦听器watch、计算属性computed的设置都跟之前的定义方式一样 } ```

---

3. style--> 组件的样式

``` // css样式表的书写位置 // 加了lang属性才能使用less语法 ```

组件之间的关系

使用组件的三个步骤：

在App.vue组件中

1. 使用import语法 导入 需要的组件

// 写在script标签内 // @ 代表的是src这层路径 import Left from '@/compents/Left.vue'

2. 使用components节点 注册 组件

export default { components: { 'Left': Left // '组件名称': 组件 键值对 // 因为键和值一样，所以直接简写为一个Left也可以 } }

注意1：使用components注册的节点是私有子组件

注意2：这里的组件注册名称的设置是为了在使用组件的时候写的标签名；而组件声明的时候可以设置的 name属性 (与data平级的name节点)，主要是在存储的时候使用(在调试工具中也会显示自己设置的name属性)

注意3：若在声明组件的时候没有指定name属性，则组件的名称默认就是注册时的名称

---

3. 以标签的形式 使用 上面注册的组件

```

```

注意：组件创建后并没有生成实例，只有在以标签的形式使用了组件的时候才生成了组件实例( new Vue( ) )

---

私有子组件与全局组件

• 通过components注册的是私有子组件

例如：在组件A的components节点下注册了组件B，则组件B只能用在组件A中，而不能用在别的组件中

在一些组件需要在不同组件中频繁使用的时候，需要在各个组件中注册，比较繁琐且代码冗余。可以通过全局组件解决

• 注册全局组件

在vue项目的main.js入口文件中，通过Vue.component( )方法注册全局组件

```js // 在main.js中 // 导入需要全局注册的组件 import Count from '@/components/Count.vue'

// 使用Vue构造函数的component方法 // 参数1：表示组件的"注册名称"，字符串格式。使用组件时的标签名就是 // 参数2：需要被全局注册的组件 Vue.component('MyCount', Count) ```

注意！！！要先注册全局组件，再在实例中使用组件。(即必须在Vue实例化之前注册全局组件，否则组件不会生效)

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖