vue组件介绍之ref

尽管组件中存在prop和事件，但有时候仍需要直接访问一个子组件；为了达到这个目的，可以通过ref这个属性为子组件赋予一个ID引用。

vue2组件中ref的使用

//base-input子组件
<template>
<input
ref="input"
type="text"
:value="value"
@input="$emit('input', $event.target.value)"
/>
</template>
<script>
export default {
    props:{
    	value:[String, Number]
    },
    data(){
        return { }
    },
    methods:{
    	/*获取焦点方法*/
    	focus(e){
			this.$refs.input.focus();
		}
    }
}
</script>

/*父组件*/
<template>
<div class="index-main">
	<base-input ref="usernameInput" v-model="inputVal"></base-input>
</div>
</template>
<script>
import base-input from '../components/BaseInput';//普通组件
export default {
	components:{
	     'base-input': base-input
	},
	data(){
	   return {
	   	  inputVal:""
	   }
	},
	mounted(){
		/*父组件页面加载完成后使input自动获取焦点*/
		this.$refs.usernameInput.focus();
	},
}
</script>

父组件使用ref属性定义一个唯一值，通过this.$refs.usernameInput访问子组件中的data和method；

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

vue3组件中ref的用法

当vue3子组件使用组合式API时，即使用< script setup >的写法，组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 < script setup> 中声明的绑定。

如果需要暴露子组件中某个方法或者属性，需要通过defineExpose 编译器宏来显式指定。

/*子组件*/
<template>
	<input ref="inputRef" type="text" :value="value" />
</template>

<script setup>
	import { ref } from 'vue'
	const props = defineProps({
		value: [String,Number]
	})
	const inputRef = ref();
	const msg = ref('测试');
	function focus(){
		inputRef.value.focus();
	}
	defineExpose({focus,msg})
</script>

/*父组件*/
<script setup>
import {ref } from 'vue';
import BaseInput from '@/components/BaseInput.vue'
const inputVal = ref('');

const usernameInput = ref();
onMounted(()=>{
	console.log(usernameInput.value.msg);//测试，获取子组件msg的值
	usernameInput.value.focus(); //调取子组件的focus方法
})
</script>

<template>
	<div class="index-main">
		<BaseInput ref="usernameInput" :value="inputVal"></BaseInput>
	</div>
</template>