Vue 创建组件的两种方法小结(必看)


Posted in Javascript onFebruary 23, 2018

创建组件的两种方法小结

1.全局注册

2.局部注册

var child=Vue.extend({})
var parent=Vue.extend({})

Vue.extend() 全局方法 生成构造器,创建子类

使用基础 Vue 构造器,创建一个“子类”。

这样写非常繁琐。于是vue进行了简化

使用Vue.component()直接创建和注册组件:

Vue.component(id,options) 全局方法 用来注册全局组件

id 是string类型,即是注册组件的名称

options 是个对象

// 全局注册,my-component1是标签名称
Vue.component('my-component1',{
 template: '<div>This is the first component!</div>'
})
var vm1 = new Vue({
 el: '#app1'
})

Vue.component()的第1个参数是标签名称,第2个参数是一个选项对象,使用选项对象的template属性定义组件模板。

使用这种方式,Vue在背后会自动地调用Vue.extend()。

在选项对象的components属性中实现局部注册:

var vm2 = new Vue({
 el: '#app2',
 components: {
  // 局部注册,my-component2是标签名称
  'my-component2': {
   template: '<div>This is the second component!</div>'
  },
  // 局部注册,my-component3是标签名称
  'my-component3': {
   template: '<div>This is the third component!</div>'
  }
 }
})

==局部注册都放在选项对象中创建==

注意:这里是components,里面可以定义多个组件。

简化后是这样的写法

<body>
 <div id='box'>  
  <parent>  
  </parent>
 </div>
 <script src='js/vue.js'></script>
 <script>
  Vue.component('parent',{
   template:`<div><h1>我是父组件</h1><child></child></div>`,
    components:{
    'child':{
     template:`<h1>我是子组件</h1>`
    }
   }
  })
  new Vue({
   el:'#box'
  })
 </script>
</body>

注册一个parent的父组件。然后在父组件的选项对象中注册一个child的子组件。将子组件child的标签写到父组件parent的template里面。

页面上的样式结构就是

<div>
 <h1>我是父组件</h1>
 <h1>我是子组件</h1>
</div>

注意:用局部注册的子组件不能单独直接使用!

标签挂在div里,会报错

<div id='box'>  
 <child></child>
</div>

结果会报错。

以上这篇Vue 创建组件的两种方法小结(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中:disabled选择器用法实例
Jan 04 Javascript
js给selected添加options的方法
May 06 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
Vue响应式原理详解
Apr 18 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 #Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 #Javascript
angular动态表单制作
Feb 23 #Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 #Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 #Javascript
Vue父组件调用子组件事件方法
Feb 23 #Javascript
vue实现密码显示隐藏切换功能
Feb 23 #Javascript
You might like
php设置允许大文件上传示例代码
2014/03/10 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
ES6的新特性概览
2016/03/10 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
面试常见的js算法题
2017/03/23 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
Python文件操作类操作实例详解
2014/07/11 Python
github配置使用指南
2014/11/18 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
对python中的pop函数和append函数详解
2018/05/04 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
有关Python的22个编程技巧
2018/08/29 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
使用Pycharm分段执行代码
2020/04/15 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
大学生个人自我鉴定
2013/12/03 职场文书
医院护士的求职信范文
2013/12/26 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis