编程 Javascript

Vue中$refs的用法详解

Posted in Javascript onJune 24, 2018

说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）

使用：在 HTML元素中，添加ref属性，然后在JS中通过vm.$refs.属性来获取

注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <style>
  </style>
</head>
<body>
  <div id="vue_app">
    <qinwm ref="vue_qinwm"></qinwm>
    <p ref="vue_p">Hello, world!</p>
    <button @click="getRef">getRef</button>
  </div>
</body>
</html>
<script>
  Vue.component("qinwm", {
    template: `<h1>{{msg}}</h1>`,
    data(){
      return {
        msg: "Hello, world!"
      };
    },
    methods:{
      func:function (){
        console.log("Func!");
      }
    }
  });
  new Vue({
    el: "#vue_app",
    data(){
      return {};
    },
    methods: {
      getRef () {
        console.log(this.$refs);
        console.log(this.$refs.vue_p); // <p>Hello, world!</p>
        console.log(this.$refs.vue_qinwm.msg); // Hello, world!
        console.log(this.$refs.vue_qinwm.func); // func:function (){ console.log("Func!"); }
        this.$refs.vue_qinwm.func(); // Func!
      }
    }
  });
</script>

总结

以上所述是小编给大家介绍的Vue中$refs的用法详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大的！

Vue中$refs的用法详解

- Author -

果冻丨小布丁

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

线路分流自动智能跳转代码,自动选择最快镜像网站(js)

Oct 31 Javascript

广泛收集的jQuery拖放插件集合

Apr 09 Javascript

一个可以增加和删除行的table并可编辑表格中内容

Jun 16 Javascript

jQuery消息提示框插件Tipso

May 04 Javascript

每天一篇javascript学习小结（Boolean对象）

Nov 12 Javascript

Bootstrap学习笔记之js组件（4）

Jun 12 Javascript

AngularJS 避繁就简的路由

Jul 01 Javascript

BootStrap Fileinput初始化时的一些参数

Dec 30 Javascript

微信小程序 label 组件详解及简单实例

Jan 10 Javascript

js 事件的传播机制(实例讲解)

Jul 20 Javascript

微信小程序实现留言板功能

Nov 02 Javascript

vue 实现特定条件下绑定事件

Nov 09 Javascript

JS实现获取word文档内容并输出显示到html页面示例

Jun 23 #Javascript

纯JS实现的读取excel文件内容功能示例【支持所有浏览器】

Jun 23 #Javascript

Vue子组件向父组件通信与父组件调用子组件中的方法

Jun 22 #Javascript

Vue验证码60秒倒计时功能简单实例代码

Jun 22 #Javascript

JS实现图片转换成base64的各种应用场景实例分析

Jun 22 #Javascript

使用vue-infinite-scroll实现无限滚动效果

Jun 22 #Javascript

vue中实现左右联动的效果

Jun 22 #Javascript