浅析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 加载并解析XML字符串的代码
Dec 13 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
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
PHP的几个常用数字判断函数代码
2012/04/24 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
Cookie 小记
2010/04/01 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
网络技术支持面试题
2013/04/22 面试题
高中地理教学反思
2014/01/29 职场文书
工程安全员岗位职责
2014/03/09 职场文书
校长师德表现自我评价
2015/03/05 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
vue实现登陆页面开发实践
2022/05/30 Vue.js