目錄

一、ref模版引用。

（1）基本介紹。

（2）核心基本步驟。(以獲取DOM、組件為例)

（3）案例：獲取dom對象演示。

<1>需求：點擊按鈕，讓輸入框聚焦。

（4）案例：獲取組件實例內的屬性和方法。(defineExpose編譯宏函數)

二、ref模版引用與defineExpose編譯宏函數小結。

---

一、ref模版引用。

（1）基本介紹。

• ref 模板引用是 Vue 提供的直接操作 DOM 或子組件的工具。
• （通過ref標識獲取頁面中真實的dom對象或者組件實例對象，從而就可以調用dom里面的屬性和方法、組件內的屬性和方法）
• 在 Vue3 組合式 API 中，ref 模板引用是用于在 JavaScript 中直接獲取 DOM 元素或子組件實例引用的機制。

（2）核心基本步驟。(以獲取DOM、組件為例)

1. 使用 ref 函數創建一個（ref對象）響應式引用（如 const inputRef = ref(null)）。其中初始值通常設為 null（表示無引用）。
2. 通過 ref 指令將變量與 DOM 元素或子組件關聯。（如 <input ref="inputRef" /> 或 <ChildComponent ref="childRef" />）。這一步就是通過ref標識綁定ref對象到標簽。
3. 模板渲染完成后！！ref 變量會自動指向對應的 DOM 元素或子組件實例。可在 onMounted 鉤子（生命周期函數）或其他邏輯中使用。

（3）案例：獲取dom對象演示。

<1>需求：點擊按鈕，讓輸入框聚焦。

• 代碼示例。

<script setup>
//ref模版引用
import {onMounted, ref} from "vue";
//1.調用ref函數，生成一個ref對象
const input = ref(null)//使用生命周期鉤子：onMounted
onMounted(() => {//可以在頁面渲染完成后，輸入框自動聚焦/*input.value.focus()*/
})const inputFocus = () =>{console.log(input.value)//3.通過ref對象.value即可訪問綁定到的元素（必須渲染完成后才能拿到）input.value.focus()
}
</script><template><div>
<!--    2.通過ref標識，進行綁定 --><input ref="input" type="text"><button @click="inputFocus" style="margin-left: 10px">點擊讓輸入框聚焦</button></div>
</template><style scoped>
</style>

• 效果。

---

（4）案例：獲取組件實例內的屬性和方法。(defineExpose編譯宏函數)

• 默認情況下：<script setup>語法糖下組件內部的屬性和方法是不開放給父組件訪問的！

---

• 想在父組件訪問到可使用?defineExpose 編譯宏指定屬性、方法允許訪問！！
• App.vue代碼示例。

<script setup>
//引入子組件
import Test from "./components/Test.vue";
//ref模版引用
import {ref} from "vue";
//1.調用ref函數，生成一個ref對象
const testRef = ref(null)
const getTest = () => {console.log(testRef.value)
}
</script><template><div><h1>父組件App.vue</h1><div class="test"><!--    2.通過ref標識，進行綁定 --><Test ref="testRef"></Test><button @click="getTest">獲取組件內部屬性和方法</button></div></div>
</template><style scoped>
.test {border: 1px solid #000;padding: 10px;
}
</style>

• Test.vue代碼示例。

<script setup>
const count = 999
const sayHi = () =>{console.log('打招呼')
}
defineExpose({count,sayHi
})
</script><template><div><h2>我是用于測試的組件</h2></div>
</template><style scoped></style>

• 頁面渲染效果。

---

• 父組件中通過ref模版引用獲取組件實例并使用組件內部的屬性和函數。

---

---

---

二、ref模版引用與defineExpose編譯宏函數小結。

1. 獲取ref模版引用的時機是：組件掛載完畢之后！
2. defineExpose編譯宏函數的作用：顯示暴露組件內部的屬性和方法(函數)。