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中的閃爍...