在開發Vue項目過程中,代碼複用之自定義組件是常做事情。當子組件爲form表單的時候,父組件需要獲取子組件(表單)的驗證結果。
儘管有 prop 和事件,但是有時仍然需要在 JavaScript 中直接訪問子組件。爲此可以使用 ref 爲子組件指定一個引用 ID。ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子組件上,引用就指向組件實例。通過這種方式,便可以在父組件中調用子組件方法!
子組件
<template>
<div>
<el-form :model="aForm" :rules="aRules" ref="aForm">
<el-form-item label="名稱" prop="name">
<el-input v-model="aForm.name"></el-input>
</el-form-item>
<el-form-item label="年齡" prop="age">
<el-input v-model="aForm.age"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'A',
data() {
return {
aForm: {
name: '',
age: ''
},
aRules: {
name: [
{ required: true, message: '請輸入名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
],
age: [
{ required: true, message: '請輸入年齡', trigger: 'blur' }
],
}
}
},
methods: {
validateForm() {
let flag = false
this.$refs['aForm'].validate((valid) => {
flag = valid
})
return flag
}
}
}
</script>
父組件
<template>
<div>
<A ref="a"></A>
<el-button @click="save">保存</el-button>
</div>
</template>
<script>
import A from './a.vue'
export default {
name: 'child-component-validate',
data() {
return {}
},
methods: {
save() {
console.log(this.$refs['a'].validateForm())
}
},
components: {
A
}
}
</script>
當 v-for 用於元素或組件的時候,引用信息將是包含 DOM 節點或組件實例的數組。
關於 ref 註冊時間的重要說明:因爲 ref 本身是作爲渲染結果被創建的,在初始渲染的時候你不能訪問它們 - 它們還不存在!$refs 也不是響應式的,因此你不應該試圖用它在模板中做數據綁定。