.vue组件介绍

什么是组件化开发

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

后缀为 .vue 的都叫 vue 的组件

vue 组件的三个组成部分

• template -> 组件的模板结构

  只能包含唯一的根节点，比如用一个 div 包裹起来

• script -> 组件的 JavaScript 行为

• style -> 组件的样式

组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的

<template>
  <div>
    <div>
      <h3>这是用户自定义的 Test.vue --- {{ username }}</h3>
      <button @click="chagneName">修改用户名</button>
    </div>
    <div>123</div>
  </div>
</template>

<script>
// 默认导出。这是固定写法！
export default {
  // data 数据源
  // 注意：.vue 组件中的 data 不能像之前一样，不能指向对象。data 必须是一个函数
  data() {
    // 这个 return 出去的 { } 中，可以定义数据
    return {
      username: 'admin'
    }
  },
  methods: {
    chagneName() {
      // 在组件中， this 就表示当前组件的实例对象
      console.log(this)
      this.username = '哇哈哈'
    }
  },
  // 当前组件中的侦听器
  watch: {},
  // 当前组件中的计算属性
  computed: {},
  // 当前组件中的过滤器
  filters: {}
}
</script>

<style lang="less">
  // 加了 lang="less" 表示让 style 支持 less 语法
</style>

在.vue文件敲一个 >或大V 回车就会快速生成这三个组成部分

组件之间的父子关系

在使用组件才会形成父子关系，兄弟关系

4.1 使用组件的三个步骤

// 步骤3：以标签形式使用刚才注册的组件
<div>
	<Left></Left>
</div>
//步骤1：使用 import 语法导入需要的组件['@'就是表示src这层目录,vuecli配置好的]
import Left from '@/components/Left.vue'
//步骤2：使用 components 节点注册组件
export default {
    components: {
        Left
    }
}

安装Path Autocomplete 插件 敲路径 @/components/Left.vue 就会有提示

安装完插件，如何还没路径提示，就进入设置里面的settings.json复制下面一段代码进去

// 导入文件时是否携带文件的扩展名
"path-autocomplete.extensionOnImport":true,
// 配置 @ 的路径提示
"path-autocomplete.pathMappings":{
    "@":"${folder}src"
},

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

列如：在组件 A 的 components 节点下，注册了组件 F， 组件 F 只能用在组件 A 中，除非其他组件也使用 components 注册；

4.3 注册全局组件

在项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下：

补充：当函数只有一行代码可以简写

<template>
  <div>
    <p>count 的值是：{{ count }}</p>
    <button @click="add">+1</button>
    <!-- 简写后不用写方法 -->
    <button @click="count += 1">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count += 1
    }
  }
}
</script>

<style>
</style>

组件的 props

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！

语法格式如下：

示例代码：

<!-- 使用 MyCount 的组件 注意：不加:传过去的是字符串'6' -->
<MyCount :init="6"></MyCount>
<!-- MyCount组件 -->
<script>
export default {
  // props 是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值
  // 自定义属性的名字，是封装者自定义的（只要名称合法即可）
  // props 中的数据，可以直接在模板结构中被使用
  // 注意：props 是【只读】的，不要直接修改 props 的值，否则终端会报错！
  // 【第一种简单的写法,指向数组】
  // props: ['init'],
  // 【第二种写法,指向对象】
  props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
    // 自定义属性C : { /* 配置选项 */ },
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
      default: 0,
      // 如果传递过来的值不符合此类型，则会在终端报错
      type: Number,
      // 必填项校验
      required: true
    }
  },
  data() {
    return {
      // 把 props 中的 init 值，转存到 count 上
      count: this.init
    }
  }
}
</script>

组件之间的样式冲突问题

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

导致组件之间样式冲突的根本原因是：

① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的

② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

6.1 思考：如何解决组件样式冲突的问题

为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域，示例代码如下

6.2 style 节点的 scoped 属性

6.3 /deep/ 样式穿透

当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。

可以使用 /deep/ 深度选择器。

当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/

扩展知识：

vue-template-compile 这个包的作用是把.vue文件编译成为 js 交给浏览器去解释，去运行

参考资料