ref是Vue
中提供的一种可以快速获取目标元素(标签DOM对象、子组件)一种引用方式
1,语法
<!-- 给标签添加ref属性 -->
<input type="file" ref="header"/>
<!-- 给子组件添加ref属性 -->
<Child ref="child"/>
2,获取对象
methods: {
fn() {
// 获取文件域DOM对象
let f = this.$refs.file
// 获取子组件对象
let c = this.$refs.child
}
}
3,ref
可以实现:父组件给子组件传递数据
<template>
<div class="ucenter-container">
<h2>用户中心</h2>
<UserDetail ref="udetail"/>
<button @click="showInfo">查看用户信息</button>
</div>
</template>
<script>
import UserDetail from '../components/UserDetail.vue'
export default {
data() {
return {
name: 'Mr.C',
age: 18
}
},
methods: {
showInfo() {
console.log(this.$refs.udetail)
// 可以通过ref对象,直接操作子组件中的数据
this.$refs.udetail.user.name = this.name
this.$refs.udetail.user.age = this.age
}
},
components: {
UserDetail
}
}
</script>
<style>
</style>