vue2.x之组件

一、什么是组件？

⏰ 宏观上组件

在软件开发中，组件（Component）是指具有独立功能和可重用性的模块化单元。它可以是一个软件系统的一部分，也可以是一个独立的软件单元。组件的设计目标是使系统更易于开发、测试、维护和扩展。

^{👀 注释：“软件单元：可以是一个类，一个函数，一个功能等；”}

⏰ Vue中的组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

^{👀注释：“之所以会出现组件，最大的目的就是为了提高代码的复用性。”}

二、创建组件

创建组件有两种方式：非单文件组件和单文件组件

1.单文件组件

🔔 单文件组件是一个单独的文件，文件的后缀名是.vue。一个这种.vue文件就是一个组件。这种文件格式必须要在vue脚手架中才能使用。

单文件组件的创建非常简单, 直接创建一个.vue文件。具体文件内容如下：

<template>
  <div class="test-wrapper">
    <div>number的值: {{number}}</div>
    <button @click="addNumber">增加number</button>
  </div>
</template>
<script>
export default {
  name: 'test',
  data () {
    return {
      number: 1
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  },
  methods: {
    addNumber() {
      this.number++;
    }
  }
};
</script>
<style lang="scss" scoped>
  .test-wrapper {
  }
</style>

里面可以配置：

• name: 组件的名称
• data: 组件数据
• methods: 组件方法
• 计算属性
• watch
• 生命周期
• 过滤器
• 等等

2. 非单文件组件

🔔 非单文件组件是和单文件组件对应的组件，它是定义直接在vm实例中的，没有单独作为一个组件。

这种创建主要是通过Vue.extend(options)来创建的，其中options配置选项和new Vue(options)几乎一样，但也有些区别，主要区别如下：

1. 不需要el配置项： 因为最终所有的组件都会经过vm，由vm的el决定服务于哪个容器
2. data必须写成函数：因为组件会被复用，多个组件之间，写成对象的话会被修改，造成污染，而写成函数就可以避免这个问题。
3. 使用template配置页面模板内容，需要注意的是template里面必须有一个父容器。

创建代码如下：

const test = Vue.extend({
    name: 'test',
    template: '<p>{{firstName}} {{lastName}}</p>',
    data: function () {
      return {
        firstName: 'Walter',
        lastName: 'White',
      }
    }
});

其中这种方式也可以简写成

const test = {
    name: 'test',
    template: '<p>{{firstName}} {{lastName}}</p>',
    data: function () {
      return {
        firstName: 'Walter',
        lastName: 'White',
      }
    }
};

^{👀 这种方式，等价于直接书写配置对象，省略了“Vue.extend()”, 工程编译时识别到配置项，会自动补全相关缺失部分}

三、注册组件

注册组件主要有两种方式：全局注册和局部注册。很明显，全局注册就是所有组件都能使用，局部注册就只能在当前组件内部使用。

1. 全局注册

全局注册主要使用到Vue.component().其中第一个参数是组件名，第二个参数是具体组件内容

⏰ 单文件组件

// 引入组件文件
  import test from '@components/test.vue';
  Vue.component('test', test)

⏰ 非单文件组件

const test = Vue.extend({
    name: 'test',
    template: '<p>{{firstName}} {{lastName}}</p>',
    data: function () {
      return {
        firstName: 'Walter',
        lastName: 'White',
      }
    }
});
Vue.component('test', test)

2. 局部注册

局部注册是在当前组件或者new Vue内部配置components: {}来完成的。

⏰ 单文件组件

<script>
import test from '@components/test.vue';
export default {
  components: {test}, 
  data () {
    return {
      number: 1
    };
  }
}

⏰ 非单组件组件

const test = Vue.extend({
    name: 'test',
    template: '<p>{{firstName}} {{lastName}}</p>',
    data: function () {
      return {
        firstName: 'Walter',
        lastName: 'White',
      }
    }
});
new Vue({
   components: {test}
})

四、使用组件

使用组件的方式很简单，直接将组件名写在需要使用的组件的模板中就可以了。比如：

1. 单文件组件

<template>
  <div class="test-wrapper">
    <div>number的值: {{number}}</div>
    <button @click="addNumber">增加number</button>
    <test></test> //使用组件
  </div>
</template>
<script>
import test from '@components/test.vue';
export default {
  components: {test}, 
  data () {
    return {
      number: 1
    };
  },
  methods: {
    addNumber() {
      this.number++;
    }
  }
};
</script>
<style lang="scss" scoped>
  .test-wrapper {
  }
</style>

2. 非单文件组件

const test = Vue.extend({
    name: 'test',
    template: '<p>{{firstName}} {{lastName}}</p>',
    data: function () {
      return {
        firstName: 'Walter',
        lastName: 'White',
      }
    }
});

new Vue({
  template: `<div><test></test></div>`,
  components: {test}
})

五、命名需要注意的地方

⏰ 关于组件名：

1. 一个单词组成：可以使用首字母小写（test）,也可以使用首字母大写（Test）
2. 多个单词组成：可以使用kebab-case命名（my-test），也可以使用CamelCase命名（MyTest）,不过第二种方式需要使用脚手架，否则会报错

^{⚠️ 尽量不要使用html中已有的元素名称，根据功能命名}

⏰ 关于组件标签：

1.双标签
2.单闭合标签：

^{⚠️ 如果没有使用脚手架的话使用第二种会导致后续组件不能渲染。}