Vue组件是VueJS的重要功能之一，可以创建可以在HTML中重用的自定义元素。
下面通过一个例子来创建一个组件，这将更好地理解组件如何与VueJS一起工作。
一、组件的创建
要创建组件，请遵循以下语法。
Vue.component('name of the component',{
// options
});
示例：
创建一个文件：
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_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>'
});
在执行时，同样会在浏览器中体现出来。效果如下图所示 –
三、局部注册
可以直接将组件作为vue实例的一部分，如以下脚本所示。
var vm = new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h2>这是组件中的内容~</h2></div>'
}
}
});
这被称为局部注册，组件将只是创建vue实例的一部分。
到目前为止，我们了解了具有基本选项的基本组成部分。
四、动态组件
动态组件是使用关键字(标签)
<component> </component>
创建的，并且使用如下例所示的属性绑定。
动态组件是使用以下语法创建的。使用
v-bind:is = "view"
指令并为其分配值视图。
<component v-bind:is = "view">
</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>
在浏览器中打开，输出效果如下 –
