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 18 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 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面向对象的方法重载两种版本比较
2008/09/08 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
js 居中漂浮广告
2010/03/21 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
JavaScript中Function详解
2015/02/27 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
基于Cesium绘制抛物弧线
2020/11/18 Javascript
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python开发之for循环操作实例详解
2015/11/12 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python实现淘宝秒杀脚本
2020/06/23 Python
django实现支付宝支付实例讲解
2019/10/17 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
python PIL模块的基本使用
2020/09/29 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
毕业生的自我评价范文
2013/12/31 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
奶茶店创业计划书
2014/08/14 职场文书