浅谈Vue.js中ref ($refs)用法举例总结


Posted in Javascript onDecember 19, 2017

本文介绍了Vue.js中ref ($refs)用法举例总结,分享给大家,具体如下:

看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅。

一、ref使用在外面的组件上

HTML 部分

<div id="ref-outside-component" v-on:click="consoleRef">
  <component-father ref="outsideComponentRef">
  </component-father>
  <p>ref在外面的组件上</p>
</div>

js部分

var refoutsidecomponentTem={
    template:"<div class='childComp'><h5>我是子组件</h5></div>"
  };
  var refoutsidecomponent=new Vue({
    el:"#ref-outside-component",
    components:{
      "component-father":refoutsidecomponentTem
    },
    methods:{
      consoleRef:function () {
        console.log(this); // #ref-outside-component   vue实例
        console.log(this.$refs.outsideComponentRef); // div.childComp vue实例
      }
    }
  });

二、ref使用在外面的元素上

HTML部分

<!--ref在外面的元素上-->
<div id="ref-outside-dom" v-on:click="consoleRef" >
  <component-father>
  </component-father>
  <p ref="outsideDomRef">ref在外面的元素上</p>
</div>

JS部分

var refoutsidedomTem={
    template:"<div class='childComp'><h5>我是子组件</h5></div>"
  };
  var refoutsidedom=new Vue({
    el:"#ref-outside-dom",
    components:{
      "component-father":refoutsidedomTem
    },
    methods:{
      consoleRef:function () {
        console.log(this); // #ref-outside-dom  vue实例
        console.log(this.$refs.outsideDomRef); //  <p> ref在外面的元素上</p>
      }
    }
  });

三、ref使用在里面的元素上---局部注册组件

HTML部分

<!--ref在里面的元素上-->
<div id="ref-inside-dom">
  <component-father>
  </component-father>
  <p>ref在里面的元素上</p>
</div>

JS部分

var refinsidedomTem={
    template:"<div class='childComp' v-on:click='consoleRef'>" +
            "<h5 ref='insideDomRef'>我是子组件</h5>" +
         "</div>",
    methods:{
      consoleRef:function () {
        console.log(this); // div.childComp  vue实例 
        console.log(this.$refs.insideDomRef); // <h5 >我是子组件</h5>
      }
    }
  };
  var refinsidedom=new Vue({
    el:"#ref-inside-dom",
    components:{
      "component-father":refinsidedomTem
    }
  });

四、ref使用在里面的元素上---全局注册组件

HTML部分

<!--ref在里面的元素上--全局注册-->
<div id="ref-inside-dom-all">
  <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</div>

JS部分

Vue.component("ref-inside-dom-quanjv",{
    template:"<div class='insideFather'> " +
          "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
          " <p>ref在里面的元素上--全局注册 </p> " +
         "</div>",
    methods:{
      showinsideDomRef:function () {
        console.log(this); //这里的this其实还是div.insideFather
        console.log(this.$refs.insideDomRefAll); // <input type="text">
      }
    }
  });

  var refinsidedomall=new Vue({
    el:"#ref-inside-dom-all"
  });

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

Javascript 相关文章推荐
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
JSONObject使用方法详解
Dec 17 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 #Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
基于node.js实现微信支付退款功能
Dec 19 #Javascript
React Native之prop-types进行属性确认详解
Dec 19 #Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 #Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 #Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 #Javascript
You might like
怎样在php中使用PDF文档功能
2006/10/09 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
ajax异步请求详解
2017/01/06 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
Python实现word2Vec model过程解析
2019/12/16 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
python中reload重载实例用法
2020/12/15 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
十佳护士先进事迹
2014/05/08 职场文书
大学自主招生推荐信
2014/05/10 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
Linux中各个目录的作用与内容
2022/06/28 Servers