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 19 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Python文件去除注释的方法
2015/05/25 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python读大数据txt
2016/03/28 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
python getpass模块用法及实例详解
2019/10/07 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
超市重阳节活动方案
2014/02/10 职场文书
商务英语专业求职信
2014/06/26 职场文书
实习计划书范文
2015/01/16 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers