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 相关文章推荐
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
babel基本使用详解
Feb 17 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 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正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php分页函数完整实例代码
2014/09/22 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
js+css实现红包雨效果
2018/07/12 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
Python实现简单登录验证
2016/04/13 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
Python通过format函数格式化显示值
2020/10/17 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
幼儿评语大全
2014/04/30 职场文书
公司委托书格式
2014/08/01 职场文书
教师工作态度自我评价
2015/03/05 职场文书
《秋思》教学反思
2016/02/23 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js