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 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
PHP 验证码的实现代码
2011/07/17 PHP
php常用数学函数汇总
2014/11/21 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
初探nodeJS
2017/01/24 NodeJs
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python迭代用法实例教程
2014/09/08 Python
Python max内置函数详细介绍
2016/11/17 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
python实现视频读取和转化图片
2019/12/10 Python
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
志愿者服务感言
2014/02/27 职场文书
读书演讲主持词
2014/03/18 职场文书
幼师求职信
2014/06/23 职场文书
毕业证明模板
2015/06/19 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
JavaScript实例 ODO List分析
2022/01/22 Javascript
Python OpenCV超详细讲解基本功能
2022/04/02 Python
python内置模块之上下文管理contextlib
2022/06/14 Python