vue基本使用--refs獲取組件或元素的實例
更新時間：2019年11月07日 17:29:57 作者：晨曦之光11
今天小編就為大家分享一篇vue基本使用--refs獲取組件或元素的實例，具有很好的參考價值，希望對大家有所幫助。一起個跟隨小編過來看看吧
說明：vm.$refs 一個對象，持有已注冊過 ref 的所有子組件（或HTML元素）
使用：在 HTML元素 中，添加ref屬性，然后在JS中通過vm.$refs.屬性來獲取
注意：如果獲取的是一個子組件，那么通過ref就能獲取到子組件中的data和methods
添加ref屬性
<div id="app"> <h1 ref="h1Ele">這是H1</h1> <hello ref="ho"></hello> <button @click="getref">獲取H1元素</button> </div>
獲取注冊過 ref 的所有組件或元素
methods: {
getref() {
// 表示從 $refs對象 中, 獲取 ref 屬性值為: h1ele DOM元素或組件
console.log(this.$refs.h1Ele.innerText);
this.$refs.h1ele.style.color = 'red';// 修改html樣式
console.log(this.$refs.ho.msg);// 獲取組件數(shù)據(jù)
console.log(this.$refs.ho.test);// 獲取組件的方法
}
}
以上這篇vue基本使用--refs獲取組件或元素的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用命令行工具npm新創(chuàng)建一個vue項目的方法
Vue.js 提供一個官方命令行工具，可用于快速搭建大型單頁應(yīng)用。下面小編給大家分享使用命令行工具npm新創(chuàng)建一個vue項目的方法，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了vue.config.js文件使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue中的嚴格模式如何取消，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue CLI3.0中使用jQuery和Bootstrap的方法
這篇文章主要介紹了Vue CLI3.0中使用jQuery和Bootstrap的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
寫本篇文章之前其實也關(guān)注過vue中的一個關(guān)于加載動態(tài)組件is的API，最開始研究它只是用來實現(xiàn)一個tab切換的功能,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了在Vue項目中使用Typescript的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
利用Vite2和Vue3實現(xiàn)網(wǎng)站國際化的全過程
vite2已經(jīng)出來一段時間了,最近沒忍住嘗試了一下,這篇文章主要給大家介紹了關(guān)于利用Vite2和Vue3實現(xiàn)網(wǎng)站國際化的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Vue3項目剛創(chuàng)建就報錯的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vuex state中的數(shù)組變化監(jiān)聽實例
今天小編就為大家分享一篇vuex state中的數(shù)組變化監(jiān)聽實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue build過程取消console debugger控制臺信息輸出方法詳解
這篇文章主要為大家介紹了Vue build過程取消console debugger控制臺信息輸出方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09