浅析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 相关文章推荐
无阻塞加载脚本分析[全]
Jan 20 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
从vue源码看props的用法
Jan 09 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
vuex实现购物车功能
Jun 28 Javascript
Vue实现计算器计算效果
Aug 17 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
晶体管来复再生式二管收音机
2021/03/02 无线电
PHP实现把数字ID转字母ID
2013/08/12 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
Vue异步加载about组件
2017/10/31 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python 查看文件的编码格式方法
2017/12/21 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
简单了解python中的与或非运算
2019/09/18 Python
jupyter notebook 重装教程
2020/04/16 Python
学校爱国卫生月活动总结
2014/06/25 职场文书
家长意见书
2015/06/04 职场文书
转学证明范本
2015/06/19 职场文书
nginx设置资源请求目录的方式详解
2022/05/30 Servers
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS