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+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 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
ThinkPHP的L方法使用简介
2014/06/18 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
js替换字符串的所有示例代码
2013/07/23 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python实现获取序列中最小的几个元素
2014/09/25 Python
Python psutil模块简单使用实例
2015/04/28 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
名企HR怎样看待求职信
2014/02/23 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
开除员工通知
2015/04/22 职场文书
刑事撤诉申请书
2015/05/18 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
Redis读写分离搭建的完整步骤
2021/09/14 Redis
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript