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 30 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
php 定义404页面的实现代码
2012/11/19 PHP
PHP Directory 函数的详解
2013/03/07 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
js实现拖拽效果
2015/02/12 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
python求解水仙花数的方法
2015/05/11 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
python如何删除文件、目录
2020/06/23 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
幼儿园开学家长寄语
2014/01/19 职场文书
搞笑获奖感言
2014/01/30 职场文书
模范教师事迹材料
2014/02/10 职场文书
幼儿教师工作感言
2014/02/14 职场文书
保险专业自荐信范文
2014/02/20 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
租车协议书
2015/01/27 职场文书
《比的意义》教学反思
2016/02/18 职场文书