开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情

组件

组件就是实现应用中局部功能代码和资源的集合。

之所以会出现组件，最大的目的就是为了提高代码的复用性。组件主要分为三个步骤：

创建组件
定义组件
使用组件

1. 创建组件

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

1.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
生命周期
过滤器
等等

1.2 非单文件组件

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

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

不需要el配置项：因为最终所有的组件都会经过vm，由vm的el决定服务于哪个容器
data必须写成函数：因为组件会被复用，多个组件之间，写成对象的话会被修改，造成污染，而写成函数就可以避免这个问题。
使用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',
      }
    }
  };

2. 定义组件

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

2.1 全局注册

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

2.1.1 单文件组件

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

2.1.2 非单文件组件

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

2.2 局部注册

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

2.2.1 单文件组件

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

2.2.2 非单组件组件

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

3. 使用组件

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

3.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>

3.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}
  })

命名需要注意的地方

关于组件名：

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

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

关于组件标签：

双标签
单闭合标签：

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

vue2之组件

组件