vue2里面ref的具体使用方法


Posted in Javascript onOctober 27, 2017

本文介绍了vue2里面ref的具体使用方法,分享给大家,具体如下。

1、我们先定义两个组件

html部分

<div id="app">
   <navbar ></navbar>
   <pagefooter ></pagefooter>
  </div>

js部分

Vue.component('navbar',{
    template:'<div>{{navs}}</div>',
    data:function () {
     return {
      navs:1
     }
    }
   });
  Vue.component('pagefooter',{
    template:'<div>{{footer}}</div>',
    data:function () {
     return {
      footer:11
     }
    }
   });

这里怎么直接访问navbar的navs和pagefooter的footer值呢?这就用到ref了

2、ref的使用

修改组件

<div id="app">
   <navbar ref="navbar"></navbar>
   <pagefooter ref="pagefooter"></pagefooter>
  </div>
   new Vue({
    el:'#app',
    created:function(){
     
    },
    mounted:function () {
     this.$refs.navbar.navs=222
     //ready,
     //这里怎么直接访问navbar的navs和pagefooter的footer值呢,
      console.log(this.$refs.navbar.navs);
      console.log(this.$refs.pagefooter.footer);
    }
   })

如果仅仅用到一个普通标签上

<div ref="demo"></div>

他的作用和:

document.querySelector('[ref=demo]');

的作用一样

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

Javascript 相关文章推荐
JS获取URL中的参数数据
Dec 05 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
初学者AngularJS的环境搭建过程
Oct 27 #Javascript
JavaScript中Require调用js的实例分享
Oct 27 #Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 #jQuery
Popup弹出框添加数据实现方法
Oct 27 #Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 #Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 #Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 #Javascript
You might like
PHP完整的日历类(CLASS)
2006/11/27 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
bootstrap table实例详解
2017/01/06 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
Python实现测试磁盘性能的方法
2015/03/12 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
对Python 内建函数和保留字详解
2018/10/15 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
parser.add_argument中的action使用
2020/04/20 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
2014年销售工作总结与计划
2014/12/01 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书