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

最新推荐文章于 2025-10-02 06:10:01 发布

原创最新推荐文章于 2025-10-02 06:10:01 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文详细介绍了Vue中ref的使用，包括基本使用、在组件中的应用以及如何通过ref调用组件方法。通过ref，可以方便地获取DOM元素或子组件实例，实现父子组件间的通讯，增强交互体验。

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的使用</p> 节点DOM
						console.log(this.$refs.pp.innerHTML);//ref的使用
						//在普通的标签上可以直接使用ref获取DOM
					}
				},
				computed:{
					
				}
			})
			
			
			
			
		</script>
		
	</body>

ref在vue组件的使用

refs在组件中可以实现通讯的功能。

父组件上调用子组件的标签，标签内部使用ref定义，同样可以获得dom节点，这样也就会的了子组件上的标签。能够获得子组件的信息，并通过refs来改变，使用子组件的数据。清楚展示了父子之间的通讯，并且，子组件同样使用了$emit来派发发放，父组件接受后可以直接使用，在配合上refs，父子通讯就可以更加完善。

<body>
		<div id="app">
			<counter @change="clickhand" ref="one"></counter>
			<counter @change="clickhand" ref="two"></counter>
			<h2>{{total}}</h2>
			
			<input type="button" @click="getinfo" value="获取counter上的值与方法"/>
		</div>

		<script src="vue.js"></script>
		<script type="text/javascript">
			Vue.component('counter', {
				template: `<div @click="handelclick">{{number}}</div>`,
				data() {
					return {
						number: 0
					}
				},
				methods: {
					handelclick() {
						this.number++;
						this.$emit('change')
						console.log("方法被调用了");
					}
				}
			})
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						total:0
					}
				},
				methods: {
					clickhand(){
						// console.log(this.$refs.one);//VueComponent   实例对象
						// console.log(this.$refs.one.number);//number
						this.total = this.$refs.one.number + this.$refs.two.number
						//ref可有实现组件间的通讯
					},
					getinfo(){
						this.$refs.one.handelclick();
						console.log(this.$refs.one.number);
						// console.log(this.$refs.one);
						// console.log(this.$refs.o.number);
					}

				}
			})
		</script>

	</body>

ref组件操作2

ref可以调用组件中的方法

同样的原理，子组件可以通过refs来直接调用子组件总的方法，只要将调用的标签命名，并且再通过this.$refs.hello(ref命名名称)，就可以直接获得节点，通过节点来调用子组件中的方法。

<body>
		<div id="app">
              <helloworld ref="hello"></helloworld>
              <button @click="getHello">获取helloworld组件中的值</button>
		</div>
		<script src="vue.js"></script>
		<script>
			Vue.component('helloworld',{
				template:'<div></div>',
				data(){
					return {
						number:5
					}
				},
				methods:{
					handelclick(){
						console.log('被调用了');
					}
				}
			})
			const app = new Vue({
				el: "#app",
				data: {
					
				},
				methods: {
                  getHello(){
						this.$refs.hello.handelclick();
						console.log(this.$refs.hello.number);
						console.log(this.$refs.hello);
				  }
				},
				computed:{
					
				}
			})
		</script>
	</body>