Vue中$refs的用法详解

2019-11-19 13:37:03

字体：大中小

来源：转载

供稿：网友

说明：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的用法详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大的！

上一篇：使用JavaScript中的lodash编写双色球效果

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