Vue中的ref属性

一、ref属性

1. ref输出DOM结点

ref用在组件上得到的是组件实例对象。可以通过ref属性输出ref所在元素的DOM结点元素。

如图：

2. ref实际应用

popup组件定义：

<template>
	<!--弹出层pop-->
	<view>
		<uni-popup ref="popup" type="center">
			<view class="pop-box">
				<view class="title" v-if="title!=''">{{title}}</view>
				<slot></slot>			
			</view>
			<view @click="close" class="pop-closed">关闭</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				type:String,
				default:''
			},
			isOpen:{
				type:Boolean,
				default:false,
			},
		},
		data() {
			return {}
		},
		mounted() {
			if(this.isOpen){
				this.$refs.popup.open()
			}
		},
		methods: {
			open(val){
				//console.log(val)
				this.$refs.popup.open()
			},
			
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>

	.title{
		display:block;text-align: center;font-size:48rpx;margin:30rpx 0 40rpx;color:#0F2851;font-weight:bold
	}
</style>

3. ref属性总结

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象（vc）
3. 使用方式：
   1. 打标识： <h1 ref="xxx">...</h1> 或 <MySchool ref="xxx"></MySchool>
   2. 获取：this.$refs.xxx