vue组件

一.vue组件

组件就是对UI结构的复用

1.什么是组件化开发

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

2.vue中的组件化开发

• vue是一个支持组件化开发的前端框架。
• vue 中规定︰组件的后缀名是.vue。之前接触到的App.vue文件本质上就是一个vue的组件。

3.vue组件的三个组成部分

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

• template ->组件的模板结构
• script ->组件的JavaScript行为；data必须是函数 - style ->组件的样式
  注意：
• 在组件中，this就表示当前组件的实例对象
• template里面只能有一个根元素
• 

4.组件使用三步骤：

步骤1:使用import语法导入需要的组件

// 1. 导入需要使用的 .vue 组件
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
import Test from '@/components/Test.vue'

步骤2:使用components节点注册组件

 // 2. 注册组件
  components: {
    Left,
    Right,
    Test
  }

步骤3:以标签形式使用刚才注册的组件

 <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 3. 以标签形式，使用注册好的组件 -->
      <Left></Left>
      <Right></Right>
    </div>
  </div>

总结：

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

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

6.注册全局组件

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

// 导入需要被全局注册的那个组件
import Count from '@/components/Count.vue'
Vue.component('MyCount', Count)

7.组件的props

7.1定义：

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

  // props: ['init'],
  
  props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
    // 自定义属性C : { /* 配置选项 */ },
    
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效 
      default: 0,
      
      // init 的值类型必须是 Number 数字
      type: Number,
      
      // 必填项校验
      required: true
    }
  },

注意：

• props 是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值
• 自定义属性的名字，是封装者自定义的（只要名称合法即可）
• props 中的数据，可以直接在模板结构中被使用
• props 是只读的，不要直接修改 props 的值，否则终端会报错！

要想修改props 的值，可以把props 的值转存到data中，因为data 中的数据都是可读可写的!

 data() {
    return {
      // 把 props 中的 init 值，转存到 count 上
      count: this.init
    }
  },

7.2 props 的default默认值;type数据类型;required必选项

在声明自定义属性时，可以通过default来定义属性的默认值。示例代码如下:

 props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
    // 自定义属性C : { /* 配置选项 */ },
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
      default: 0,
      // init 的值类型必须是 Number 数字
      type: Number,
      // 必填项校验
      required: true
    }
  },

8.组件之间的样式冲突问题

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

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

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

解决：

<style lang="less" scoped>

7.3./deep/

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