浅析vue component 组件使用


Posted in Javascript onMarch 06, 2017

component 使用

component的注册

1.全局注册

使用用Vue.component('componentName',{template:'<div class="tem1">hello world</div>'})在初始化实例之前。

componentName自定义名称

在实例声明的作用域下中使用<componentName></componentName> 成功渲染效果就是 '<div class="tem1">hello world</div>

Vue.component('my-component',{ 
      template:'<div class="tem1">hello world</div>' 
    }

组件中的数据使用 

component不能使用实例的data ,但是可以在component 使用data 声明变量,data的使用只能使用函数形式

Vue.component('my-component',{ 
      template:'<div class="tem1">hello world {{comdata}}</div>', 
      data:function(){return {comdata:'hehe'}} 
    });

2.局部主持

在实例化的new Vue 中设置components

var app=new Vue({ 
      el:'#app', 
      components:{'example':{template:'<div>children template</div>'}} 
    })

组件中的数据使用

var app=new Vue({ 
      el:'#app', 
      data:{num:220}, 
      components:{ 
        'example':{ 
          template:'<div>children template{{mydata}}</div>', 
          data:function(){return {mydata:' mydata=data'};} 
        } 
 
      } 
    })

注意:组件不能使用实例的data:{num:220}的参数会报错

组件中同样支持methods、computed等其他属性 不会冲突保持相对的独立

这时候就必须考虑不同组件的数据通信问题

vue js总结来说通过props down events up 来传输数据

给父级调用数据使用props声明,给子集调用使用events来声明

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js相册效果代码(点击创建即可)
Apr 16 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
JS中Array数组学习总结
Jan 18 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
写一个Vue Popup组件
Feb 25 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
js常用的继承--组合式继承
Mar 06 #Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 #Javascript
canvas仿iwatch时钟效果
Mar 06 #Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 #Javascript
纯JS实现弹性导航条效果
Mar 06 #Javascript
JS实现颜色动态淡化效果
Mar 06 #Javascript
vue模板语法-插值详解
Mar 06 #Javascript
You might like
MVC模式的PHP实现
2006/10/09 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python str与repr的区别
2013/03/23 Python
Python实现截屏的函数
2015/07/26 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python生成器用法实例详解
2019/11/22 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python 实现一个计时器
2020/07/28 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
会计毕业生自荐信
2013/11/21 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
公积金接收函格式
2015/01/30 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书