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 中文字符串处理额外注意事项
Nov 15 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 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构造函数与析构函数用法示例
2016/09/28 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
Seajs的学习笔记
2014/03/04 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
小程序自定义日历效果
2018/12/29 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
vuex入门最详细整理
2020/03/04 Javascript
用js实现放大镜效果
2020/10/28 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
实例详解Python模块decimal
2019/06/26 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
Python基于template实现字符串替换
2020/11/27 Python
秋季校运动会广播稿
2014/02/23 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
李培根演讲稿
2014/05/22 职场文书
副总经理任命书
2014/06/05 职场文书
培训科主任岗位职责
2014/08/08 职场文书
大学迎新生标语
2014/10/06 职场文书
西柏坡观后感
2015/06/08 职场文书
八年级物理教学反思
2016/02/19 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
Python if else条件语句形式详解
2022/03/24 Python