本文主要是介绍vue中使用 this.$refs 来获取元素和组件的内容，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在标签添加ref属性,然后控制台打印来获取该标签的内容：
页面效果：点击按钮（获取元素内容）
在控制台查看打印内容：
代码展示如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"><title>Document</title>
</head>
<body><div id="app"><div><input type="button" value="获取元素内容" @click="getElement" /><!-- 使用 ref 获取元素 --><h1 ref="myh1">这是一个大大的H1</h1><hr><!-- 使用 ref 获取子组件 --><my-com ref="mycom"></my-com></div></div> <script>Vue.component('my-com', {template: '<h5>这是一个子组件</h5>',data() {return {name: '子组件'}}});// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {getElement() {// 通过 this.$refs 来获取元素console.log(this.$refs.myh1.innerText);// 通过 this.$refs 来获取组件console.log(this.$refs.mycom.name);}}});</script>
</body>
</html>
这篇关于vue中使用 this.$refs 来获取元素和组件的内容的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
