Vue 组件注册全解析


Posted in Vue.js onDecember 17, 2020

全局组件注册语法

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.component('MyComponent',{/*...*/})

如果使用驼峰式命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰的方式使用组件,但是在普通的标签模板中,必须使用短横线的方式使用组件

局部组件

局部组件只能在注册它的父组件中使用

局部组件注册语法

var ComponentA = {/*...*/}
var ComponentB = {/*...*/}
var ComponentC = {/*...*/}
new Vue({
  el : '#app',
  components: {

'component-a' : ComponentA,


'component-b' : ComponentB,


'component-c' : ComponentC

}
})

组件的创建

Vue.component('test-com',{
   template: '<div>Test<hello-world></hello-world></div>'
  });
  var HelloWorld = {
   data: function(){
    return {
     msg: 'HelloWorld'
    }
   },
   template: '<div>{{msg}}</div>'
  };
  var HelloTom = {
   data: function(){
    return {
     msg: 'HelloTom'
    }
   },
   template: '<div>{{msg}}</div>'
  };
  var HelloJerry = {
   data: function(){
    return {
     msg: 'HelloJerry'
    }
   },
   template: '<div>{{msg}}</div>'
  };
  var vm = new Vue({
   el: '#app',
   data: {
    
   },
   components: {
    'hello-world': HelloWorld,
    'hello-tom': HelloTom,
    'hello-jerry': HelloJerry
   }
  });

页面中的应用

<div id="app">
  <hello-world></hello-world>
  <hello-tom></hello-tom>
  <hello-jerry></hello-jerry>
  <test-com></test-com>
 </div>

以上就是Vue 组件注册全解析的详细内容,更多关于Vue 组件注册的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 #Vue.js
vue实现图片裁剪后上传
Dec 16 #Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 #Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 #Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 #Vue.js
8个非常实用的Vue自定义指令
Dec 15 #Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 #Vue.js
You might like
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
js检查是否关闭浏览器的方法
2016/08/02 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python设置检查点简单实现代码
2014/07/01 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
2014年学雷锋活动总结
2014/06/26 职场文书
2015年见习期工作总结
2014/12/12 职场文书
个人年底工作总结
2015/03/10 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
简历自我评价范文
2019/04/24 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
分享3个非常实用的 Python 模块
2022/03/03 Python