Vue 组件注册全解析
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了Vue 组件注册全解析的相关资料，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
全局组件注册语法
components中的两个参数组件名称和组件内容
Vue.component(组件名称, {
data: 组件数据,
template:组件模板内容
})
全局组件注册应用
组件创建：
Vue.component('button-counter', {
data: function(){
return {
count: 0
}
},
template: '<button @click="handle">点击了{{count}}次</button>',
methods: {
handle: function(){
this.count ++;
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
});
如何在页面中运用，直接在页面中应用组件名称
<div id="app"> <button-counter></button-counter> </div>
这个组件是可以重用的，直接在页面中多次使用，切数据相互独立，互不干扰
组件注册注意事项
1.data必须是一个函数
- 分析函数与普通对象的对比
2.组件模板内容必须是单个根元素
- 分析演示实际的效果
3.组件模板内容可以是模板字符串
- 模板字符串需要浏览器提供支持（ES6语法）
4.组件命名方式
- 短横线方式
Vue.component('my-component',{/*...* 上一篇：vue 数据操作相关总结
下一篇：js回到页面指定位置的三种方式