Home >Web Front-end >JS Tutorial >Usage of $refs in Vue
This article mainly introduces the usage of $refs in Vue. It is very good and has certain reference value. Friends in need can refer to it
Explanation: vm.$refs is an object that holds All subcomponents (or HTML elements) that have registered ref
Use: In the HTML element, add the ref attribute, and then obtain it through the vm.$refs. attribute in JS
Note: If you get a subcomponent, you can get the data and methods in the subcomponent through ref
<!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>
<p id="vue_app">
<qinwm ref="vue_qinwm"></qinwm>
<p ref="vue_p">Hello, world!</p>
<button @click="getRef">getRef</button>
</p>
</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>
The above is the entire content of this article, I hope it will be useful Everyone’s learning is helpful. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
vue-cli and webpack notepad project creation
About vue and vue-validator form verification Implementation of function
The above is the detailed content of Usage of $refs in Vue. For more information, please follow other related articles on the PHP Chinese website!