Vue中$refs的用法
Posted web-php
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中$refs的用法相关的知识，希望对你有一定的参考价值。
说明：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/[email protected]/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的用法的主要内容，如果未能解决你的问题，请参考以下文章