srcmini接上一节：VueJS模板template和v-html指令、v-bind指令的使用，Vue组件（Component）是VueJS最重要的特性之一，Vue的组件用于创建自定义元素，这些自定义元素可以在HTML中重用。
1、VueJS全局注册组件
看下面创建vue组件的例子，然后理解这些Vue是如何工作的，HTML代码如下：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VueJS组件的使用</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="component_01">
<micomponent></micomponent>
</div>
<div id="component_02">
<micomponent></micomponent>
</div>
<script src="js/component.js"></script>
</body>
</html>
component.js文件内容如下：
Vue.component("micomponent", {
template: "<div><h1>VueJS从入门到出门</h1></div>"
});
var v1 = new Vue({
el: "#component_01"
});
var v2 = new Vue({
el: "#component_02"
});
在html文件中，我们创建了两个div，id为component_01和component_02，在js文件中，和这两个id对应的创建了两个vue视图实例，并且我们创建了一个用于两个视图实例的公共组件。 创建一个Vue组件，可以使用下面的语法：
Vue.component("组件的名称", {
// options 选项
});
一旦组件被创建后，指定的组件名称对应地成为一个自定义元素，在两个创建的Vue实例元素中也可以使用相同的方法，也就是id为component_01和component_02的两个元素都可以使用组件中的内容。
在js文件中，定义的共同组件名称为micomponent，在html文件中是使用相同名称作为一个自定义元素：
<div id="component_01">
<micomponent></micomponent>
</div>
<div id="component_02">
<micomponent></micomponent>
</div>
在js文件中创建的组件中，我们添加了一个模板template到组件元素micomponent，这会在html相关的元素也添加相应的内容。这是注册全局组件的一种方式，它可以作为任何vue实例的一部分，如下面的代码所示：
Vue.component("micomponent", {
template: "<div><h1>VueJS从入门到出门</h1></div>"
});
下面是在浏览器中实际的显示效果：
组件被赋予为自定义元素标签，也就是<micomponent></micomponent>。但是，当我们在浏览器中查看相同的内容时，我们不会注意到模板中出现的这些纯HTML自定义标记，如下面的屏幕截图所示：
2、VueJS本地注册组件
另外，组件还可以被直接作为了Vue实例的一部分，使用components，如下面的代码所示：
Vue.component("micomponent", {
// 全局组件定义
});
var v1 = new Vue({
el: "#component_01",
components: {
"micomponent": {
template: "<div><h1>VueJS从入门到出门</h1></div>"
}
}
});
var v2 = new Vue({
el: "#component_02",
components: {
"micomponent": {
template: "<div><h1>VueJS从入门到入土</h1></div>"
}
}
});
这个又叫做组件的本地注册，这些本地注册的组件只属于创建的Vue实例的一部分。
3、VueJS组件的data和methods选项
目前，我们已经学习了带有基本选项的基本组件，现在，继续看看其它相关组件选项，如data和methods选项。和Vue实例一样，组件也有data和methods选项，在下面的例子中，我们使用全局注册组件作为例子，html代码和上面的一样，component.js代码如下：
Vue.component("micomponent", {
template: "<div v-on:mouseover='changetitle()' v-on:mouseout='originaltitle()'><h1>{{title}}</h1></div>",
data: function(){
return {
title: "VueJS从入门到出门"
}
},
methods: {
changetitle: function(){
this.title = "VueJS从入门到入土"
},
originaltitle: function(){
this.title = "VueJS从入门到出门";
}
}
});
var v1 = new Vue({
el: "#component_01",
});
var v2 = new Vue({
el: "#component_02",
});
在上面的js代码中，我们可以看到在组件的data中添加数据的是使用一个函数，该函数返回一个数据对象，在这里这个数据对象只有一个属性title，并有一个默认值，这个data属性是用于template模板中，也就是：
template: "<div v-on:mouseover='changetitle()' v-on:mouseout='originaltitle()'><h1>{{title}}</h1></div>"
尽管组件component中的data是一个函数，但是我们依然可以像在Vue实例中一样使用它的属性。另外，该全局组件在methods添加了两个方法，changetitle和originaltitle，前者用于鼠标放在元素上时调用，相应地改变元素的值，这里改变div中h1的值；后者用于鼠标移开鼠标时调用，这里的操作是将h1的默认值恢复。
在这里你可以注意到，上面的模板代码中使用了v-on指令，这个指令用于处理HTML元素的事件属性，和v-bind类似，后面会有关于事件的详细讲解。
下面是上面代码的显示效果：
4、VueJS动态组件的使用
动态组件（dynamic components），动态组件比上面全局注册和本地注册组件的关系更灵活，使用关键字<component></component>创建，
<div id="dynamic">
<component v-bind:is="view"></component>
</div>
Js代码如下：
var v3 = new Vue({
el: "#dynamic",
data: {
view: "component_03"
},
components: {
"component_03": {
template: "<div><h1>从入门到改行</h1></div>"
}
}
});
输出如下：
动态组件使用下面的语法创建：
<component v-bind:is="view"></component>其中v-bind:is=”view”，赋值为view，view的值其实就是组件名称，该值在JS代码又定义，因此这个is的值必须和Vue中data的值，以及组件名称一一对应，否则不起作用，这么看来，动态组件也不是那么方便，还是看具体项目需要选择使用组件的方式。
评论前必须登录！
注册