Vue组件

1. 组件化开发

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

2. vue 中的组件化开发

vue 是一个支持组件化开发的前端框架

vue 中规定：组件的后缀名是 .vue 。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

3. vue 三个组成部分

每个 .vue 组件都由 3 部分构成，分别是：

• tepmlate 组件的模板结构

  Component template should contain exactly one root element 组件结构中只能包含唯一一个根节点

• script 组件的 Js 行为

  • export default 默认导出 固定写法
  • .vue 组件中的 data 不能指向对象 应该是个函数
  • 然后 return 出去一个用于定义数据的对象

• style 组件的样式

4. methods watch computed flters

• 在 组件中 this 是当前组件的实例对象

5. 启用 less 语法

在 style 标签内加入 lang="less"

6. 组件之间的父子关系

• 组件在被封装好之后,彼此之间是相互独立的,不存在父子关系
• 在使用组件的时候,根据彼此的嵌套关系,形成了父子关系,兄弟关系

7. 使用组件的三个步骤

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

  在当前组件的 script 区导入

  import Left from '@/components/Left.vue'
  

• 使用 components 节点注册组件

  export default {
      components: {
          'Left': Left
      }
  }
  

  键与值相同，可以简写

  components: {
      Left
  }
  

• 以标签的形式使用刚刚注册的组件

  <div class="box">
      
      <Left>Left>
      <Right>Right>
  div>
  

8. 安装并配置@路径提示的插件

• 安装 插件 path Autocomplete

• 配置 插件：在 settings.json 加入下面的配置

• "path-autocomplete.extensionOnImport": true,
  "path-autocomplete.pathMappings":{
      "@":"${folder}/src"
  },
  

9. 私有子组件和全局组件

9.1 注册私有子组件

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

例如：

• 在组件A的 components 节点下，注册了 组件F。
• 则组件 F 只能用在组件 A 中；不能被用在组件 C 中。

9.2 注册全局组件

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

import Count from '@/components/Count.vue'
Vue.component('yCount' , Count)

10. 组件的 props

10.1 概念

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

10.2 使用

语法格式：

• props 中的数据可以直接在模板结构中被使用。
• props 是只读的，直接修改会报错。
• 要想要修改 props 的值，可以把 props 的值转存到 data 中。

export default {
    // props 是自定义属性
    props:['init1','init2',...]
}

之后可以在该标签上定义这些自定义属性的值：

• 此时是给init属性设置为"9"
• 当init绑定 v-bind （:）则是给属性赋值为双引号内的值 9
• :init="9"

10.2 props 是只读的

• props 是只读的，直接修改会报错。

• 要想要修改 props 的值，可以把 props 的值转存到 data 中。

• export default {
      // props 是自定义属性
      props:['init'],
      data(){
          return {
              count: this.init
          }
      }
  }
  

10.3 props 的默认值 default

在声明自定义属性时，可以通过 default 来定义属性的默认值。

// props 是自定义属性
props:{
    init:{
        default: 0
    }
}

10.4 props 的 type 值类型

在声明自定义属性时，可以通过 type 来定义属性的值类型

props:{
    init:{
        default: 0,
            type: Number
    }
}

10.5 props 的 required 必填项

如果没有传 required 的自定义属性的值，则会报错

props:{
    init:{
        default: 0,
        type: Number,
        required: true
    }
}

11. 组件之间样式冲突问题以及如何解决

11.1 样式冲突问题

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

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

• 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
• 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

11.2 如何解决

原生方法（底层原理）：

• 每个组件设置唯一的自定义属性

• style 样式使用属性选择器

• 使得样式只在该组件内有效

• span[data-v-001]{
      color: blue;
  }
  

vue 中的快捷方法

在 style 标签内加上 scoped ，底层原理如上。

11.3 通过 deep 修改子组件中的样式

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

• 如果在 scoped 的style内想要定义子组件的样式，则这样写：

• /deep/ h5{
      color: pink;
  }
  

• 会生成这样的选择器 [data-v-xxx] h5

• 如果不加上 /deep/ 则会生成 h5[data-v-xx]，但是子组件的标签上没有当前组件的自定义唯一属性，所以选择不到，样式无法生效。