浅谈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实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
Angular工具方法学习
Dec 26 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
原生JS实现留言板
Mar 26 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
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简单命令代码集锦
2007/09/24 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
jQuery中after的两种用法实例
2013/07/03 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
python WindowsError的错误代码详解
2017/07/23 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python中类的属性和方法介绍
2018/11/27 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Django-migrate报错问题解决方案
2020/04/21 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
社会实践的活动方案
2014/08/22 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
超级详细实用的pycharm常用快捷键
2021/05/12 Python