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 相关文章推荐
JS 自定义函数缺省值的设置方法
May 05 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 Javascript
JavaScript实现优先级队列
Dec 06 Javascript
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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
删除数组元素实用的PHP数组函数
2008/08/18 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
微信小程序使用Socket的实例
2017/09/19 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
基于python select.select模块通信的实例讲解
2017/09/21 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
python绘制立方体的方法
2018/07/02 Python
python进行文件对比的方法
2018/12/24 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
科学发展观标语
2014/10/08 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
化工见习报告范文
2014/10/31 职场文书
置业顾问岗位职责
2015/02/09 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android