浅析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 相关文章推荐
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 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
php采集时被封ip的解决方法
2010/08/29 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
详解NODEJS的http实现
2018/01/04 NodeJs
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
es6数据变更同步到视图层的方法
2019/03/04 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
Python通过poll实现异步IO的方法
2015/06/04 Python
python paramiko模块学习分享
2017/08/23 Python
谈谈python中GUI的选择
2018/03/01 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
怎么样写好简历中的自我评价
2013/10/25 职场文书
中层干部岗位职责
2013/12/18 职场文书
致200米运动员广播稿
2014/02/06 职场文书
怎么写自荐书范文
2014/02/12 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
机关作风建设工作总结
2014/10/23 职场文书
医生个人年终总结
2015/02/28 职场文书
入党自传范文2015
2015/06/26 职场文书
战友聚会致辞
2015/07/28 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
Java无向树分析 实现最小高度树
2022/04/09 Javascript