什么是组件
组件（component）就是零件，将零件组装成想要的工具（页面）。
组件是Vue.js最强大的功能之一，它可以扩展HTML元素，封装可重用的代码，通过传入对象的不同，实现组件的复用。
使用组件的好处
- 组件是可以复用性的
- 易于维护
- 有封装性，易于使用
- 大型项目中降低组件之间重复性
全局组件
全局组件：在任何地方，任何方式，任何地点都可以使用的标签组件。
Vue.component("vue-hesder", {
// h1标签是我们在自定义主键里面写的参数的标签
template: '<h1>标题</h1>'
})
new Vue({
el: '#main'
});
new Vue({
el: '#main2'
});
new Vue({
el: '#main3'
});局部组件
局部组件：只是在我们规定的范围之内才会生效。
new Vue({
el: '#main',
components: {
"vue-hesder": {
template: '<h1>标题{{vue}}</h1>'
}
}
})全局组件和局部组件的区别
使用范围
全局：可以再页面中任何位置使用。
局部：只能在定义它的el中使用，不能在其他位置，否则就会失效。
定义方法
全局：可以使用Vue.component（tagName，options）定义。
局部：可以通过Vue实例中component属性定义局部组件。
是否挂载：全局组件在扩展元素用于封装复用代码时不需要挂载，但是不常见，因为会影响浏览器的性能 局部组件必须手动挂载，否则会失效。
其他 局部组件中代码的编写是”components“,而全局组件中是”component“ 。
组件数据交互的特点
// 全局定义
// var data = {
// vue: 0
// }
new Vue({
el: '#main',
data: {
vue: "Welcome Xkd!"
},
components: {
"vue-hesder": {
template: '<h1 @click="add">标题{{vue}}</h1>',
data: function() {
// return data;
// 局部定义，只对当前值进行应用，不会对其他组件有影响和重复性
return {
vue: 0
}
},
methods: {
add: function() {
this.vue++;
}
}
}
}
});本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！