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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
js tab 选项卡
Apr 26 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
微信小程序获取当前位置和城市名
Nov 13 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 strtotime 函数UNIX时间戳
2009/01/14 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
浅析Vue 生命周期
2018/06/21 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
深入理解Python中装饰器的用法
2016/06/28 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
Python实现京东抢秒杀功能
2021/01/25 Python
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
我的五年职业生涯规划
2014/01/23 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
李敖北大演讲稿
2014/05/24 职场文书
用人单位聘用意向书
2015/05/11 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python