Vue非单文件组件

组件就是用来实现局部特定功能效果的代码集合，为的就是复用编码，简化项目编码，提高运行效率。

组件分为非单文件组件和单文件组件，这里介绍的是非单文件组件。

一、创建组件

创建组件的语法格式如下：

const 组件名 = Vue.extend({  // 组件的配置项  })

这里的配置项和new Vue({}) 中的配置项写法是一样的，不过不写el配置项。

且data配置项必须使用函数写法。

因为使用对象返回的方式会导致地址引用的问题，不同的组件指向的是同一个地址，修改的是同一个值。使用函数返回就不会造成这样的问题。

下面创建一个school组件和一个student组件：

这里的template配置项中必须使用一个空的div将模板包裹住，使用` ` 能够方便对代码进行换行操作。

template里面的写法和在模板中编写的代码一致。

二、注册组件

（一）局部注册

局部注册组件在new Vue() 中使用components配置项进行注册：

new Vue({

        components:{  // 组件名  }

})

（二）全局注册 

使用全局注册的组件能在任意模块中使用该组件，语法格式如下：

Vue.component("组件名", 组件名);

这里我们将student组件注册为全局组件：

三、组件使用 

直接在模板中引入如下标签：

<组件名></组件名>

四、组件的注意事项

（一）组件的命名

1. 一个单词

使用小写的单词，或者是单词首字母大写，如：school 或 School

2. 多个单词

每个单词的首字母大写或是每个单词之间使用-连接，如：MySchool 或 my-school

(必须在脚手架中才能使用使用首字母大写的形式)

（二）name配置项

使用name配置项可以指定组件在开发者工具中呈现的名字。

（三）组件标签的写法

1. <school></school>

2. <school/>      注意：该写法不使用脚手架的环境下会导致后续组件不能渲染

 （四）创建组件的简写

const 组件名 = {  // 配置项  }

如下代码是等价的，图一是完整写法，图二是简写形式：