Vue组件是VueJS的重要功能之一，可以创建可以在HTML中重用的自定义元素。
下面通过一个例子来创建一个组件，这将更好地理解组件如何与VueJS一起工作。
示例一
创建一个文件：component-example1.html ，代码如下 -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs组件示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>
文件：vue_component.js ， 内容如下 -
Vue.component('testcomponent',{
template : '<div><h2>这是组件中的内容~</h2></div>'
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
在component-example1.html文件中，创建了两个ID为component_test和component_test1的div。 在上面的vue_component.js 文件中，使用div的id创建了两个Vue实例。并创建了一个公共组件(testcomponent)，用于两个视图实例。
要创建组件，请遵循以下语法。
Vue.component('nameofthecomponent',{ // options});
当创建了一个组件，组件的名称就成为了自定义元素，并且可以在创建的Vue实例元素中使用相同的元素，即在带有component_test和component_test1的div中。
在vue_component.js 文件中，我们使用了 testcomponent 作为组件的名称，并使用相同的名称作为div中的自定义元素。
示例
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
在vue_component.js 文件中创建的组件中，添加了一个已经分配了HTML代码的模板。 这是一种注册全局组件的方法，可以将其作为任何vue实例的一部分，如以下脚本所示。
Vue.component('testcomponent',{
template : '<div><h2>这是组件中的内容~</h2></div>'
});
在执行时，同样会在浏览器中体现出来。效果如下图所示 -
这些组件被赋予了自定义元素标签，即<testcomponent> </testcomponent>。 但是，当我们在浏览器中检查相同的内容时，不会注意到模板中存在的纯HTML中的自定义标记，如以下屏幕截图所示-
还可以直接将组件作为vue实例的一部分，如以下脚本所示。
var vm = new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h2>这是组件中的内容~</h2></div>'
}
}
});
这被称为局部注册，组件将只是创建vue实例的一部分。
到目前为止，我们了解了具有基本选项的基本组成部分。 现在，让我们添加更多的选项，如数据和方法。 就像Vue实例有数据和方法一样，组件也是一样的。 因此，我们将扩展前面学过的数据和方法的代码。
示例二
创建一个文件：component-example2.html ，代码如下 -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs组件示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component2.js"></script>
</body>
</html>
创建一个文件：vue_component2.js ，代码如下 -
Vue.component('testcomponent',{
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h2>Custom Component created by <span id = "name">{{name}}</span></h2></div>',
data: function() {
return {
name : "Maxsu"
}
},
methods:{
changename : function() {
this.name = "Kobe Bryant";
},
originalname: function() {
this.name = "Linsa";
}
}
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
在上面的vue_component2.js 文件中，我们添加了一个函数，它返回一个对象。 该对象具有名称属性，该属性被分配值为"Maxsu"。这在以下模板中使用。
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h2>Custom Component created by <span id = "name">{{name}}</span></h2></div>',
尽管数据是组件中的一个函数，但是可以像使用Vue实例一样使用它的属性。 另外，还有两个方法，即changename和originalname。 在更改名称中更改name属性，而在原始名称中，将其重置为原始名称。
我们还在div上添加了两个事件：，mouseover和mouseout。 事件的细节将在事件章节中讨论。所以现在，mouseover调用changename方法，而mouseout调用originalname方法。
相同的显示在下面的浏览器中显示 -
在上面的浏览器中所看到的，它显示了在data属性中分配的名字，这是同一个名字。 我们还在div上分配了一个mouseover事件，并且还有一个mouseout事件。看看当触发mouseover和mouseout时会发生什么效果？如下图所示 -
动态组件
动态组件是使用关键字(标签)<component> </component>创建的，并且使用如下例所示的属性绑定。
实例
创建一个文件：dynamic-components.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs动态组件示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<component v-bind:is = "view"></component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">VueJs动态组件内容~</span></div>'
}
}
});
</script>
</body>
</html>
在浏览器中打开，输出效果如下 -
动态组件是使用以下语法创建的。
<component v-bind:is = "view"></component>
它有使用v-bind:is = "view"指令并为其分配值视图。视图在Vue实例中定义如下。
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">VueJs动态组件内容~</span></div>'
}
}
});
执行时，模板动态组件将显示在浏览器中。
