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 相关文章推荐
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
js弹出对话框方式小结
Nov 17 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
初学者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语法(1)
2006/10/09 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
原生js实现验证码功能
2017/03/16 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
Python设置默认编码为utf8的方法
2016/07/01 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
中学教师岗位职责
2013/11/26 职场文书
学生会招新策划书
2014/02/14 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
面试必备的求职信
2014/05/25 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
Python源码解析之List
2021/05/21 Python
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android