vue的ref的基本使用，组件使用与操作

最新推荐文章于 2024-12-29 11:47:05 发布

dev1ce5

最新推荐文章于 2024-12-29 11:47:05 发布

阅读量2.8k

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_70051679/article/details/125509218

版权

本文介绍了Vue.js中ref的使用，包括基本的DOM元素引用和在组件中的应用。通过`this.$refs`，可以获取到DOM元素或者子组件实例，实现对元素内容的获取或修改，以及父子组件间的通信。此外，还讲解了如何通过ref调用子组件的方法，增强了对Vue组件交互的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ref的基本使用

$refs方式：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

refs命名后，放标签内后，调用【this.$refs.命名】可以和document.getElementById(id')同样的效果，得到dom的节点，也就是标签本身，在通过js的innerHTML即可得到标签上的内容

<body>
 
		
		 <div id="app">
			 <p @click="clickref" ref="pp" id="p">ref的使用</p>
			 
			 
		 </div>
		
		<script src="vue.js"></script>
		
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						
					}
				},
				methods:{
					clickref(){
						console.log(document.getElementById('p'));//<p id="p">ref的使用</p>
						// console.log(document.getElementById('p').innerHTML);
						console.log(this.$refs.pp);//<p id="p">ref

最低0.47元/天解锁文章