Vue知識點二 refs的基本用法

2021-10-17 18:46:58 字數 1903 閱讀 6847

ref 加在普通的元素上,用this.$refs.(ref值) 獲取到的是dom元素

ref加在子元件上,用this.ref

s.(r

ef值)

獲取到的

是元件實

例,可以

使用元件

的所有方

法。在使

用方法的

時候直接

this

.refs.(ref值)獲取到的是元件例項,可以使用元件的所有方法。在使用方法的時候直接this.

refs.(

ref值

)獲取到

的是元件

例項,可

以使用組

件的所有

方法。在

使用方法

的時候直

接thi

s.refs.(ref值).方法() 就可以使用了

如何利用v-for 和 ref 獲取一組陣列或者dom 節點

ref 需要在dom渲染完成後才會有,在使用的時候確保dom已經渲染完成。比如在生命週期 mounted(){} 鉤子中呼叫,或者在 this.$nexttick(()=>{}) 中呼叫。

如果ref 是迴圈出來的,有多個重名,那麼ref的值會是乙個陣列 ,此時要拿到單個的ref 只需要迴圈就可以了。

* @description: v-shwo與v-

if**

* @author:

hmm* @date:

2021-01

-2119:

49:56--

>

="test"

>

"primary" @click=

"settabnum(1)"

>切換1

<

/el-button>

"success" @click=

"settabnum(2)"

>切換2

<

/el-button>

"testrefs()"

>測試ref用法<

/el-button>

<

/el-header>

v-show使用:<

/h1>

>

"tabnum === 1" ref=

"tabshow1"

>show - 頁面1

<

/div>

"tabnum === 2" ref=

"tabshow2"

>show - 頁面2

<

/div>

>

>

>

v-if使用:<

/h1>

>

"tabnum === 1" ref=

"tabif1"

>

if- 頁面1

<

/div>

"tabnum === 2" ref=

"tabif2"

>

if- 頁面2

<

/div>

<

/el-main>

<

/el-container>

<

/div>

<

/template>

js--

>

export

default;}

, methods:

num number型別

* @return

*/settabnum

(num)

,/**

* @description: 測試ref用法

* @param

* @return

*/testrefs()

}};<

/script>

vue知識點總結(二)

父子通訊 傳遞資料 vue.component child props a 子父聽信需要借助於事件驚醒傳遞 emit 和on子元件中通過 emit 觸發自定義事件事件,傳遞子元件的資料 在父元件中 通過 on 監聽子元件的自定義事件,接受資料 子父通訊的步驟 vue.component slideb...

Vue的知識點

3 例項中的屬性要在data中宣告才會被渲染 4 鉤子就是元件的生命週期函式,生命週期即beforecreated,create,beforemount,mounted,beforeupdate,updated,beforedestory,destoryed它的本質就是特定時間段自動觸發的函式 5 ...

Vue常用知識點

使用cdn 通過npm安裝 npm install vue 獲取當前繫結的元素獲取當前繫結的資料 vm.data 更換data物件重新整理檢視,盡量不去更換 監控模型的變化 vm.watch message function newval,oldval 生命週期 3.3 屬性的計算1.vue中的閃爍...