vue基本使用--refs獲取組件或元素的實(shí)例

發(fā)布時(shí)間：2020-10-26 09:50:54 來(lái)源：腳本之家閱讀：288 作者：晨曦之光11 欄目：web開(kāi)發(fā)

說(shuō)明：vm.$refs 一個(gè)對(duì)象，持有已注冊(cè)過(guò) ref 的所有子組件（或HTML元素）

使用：在 HTML元素中，添加ref屬性，然后在JS中通過(guò)vm.$refs.屬性來(lái)獲取

注意：如果獲取的是一個(gè)子組件，那么通過(guò)ref就能獲取到子組件中的data和methods

添加ref屬性

<div id="app">
  <h2 ref="h2Ele">這是H1</h2>
  <hello ref="ho"></hello>

  <button @click="getref">獲取H1元素</button>
 </div>

獲取注冊(cè)過(guò) ref 的所有組件或元素

methods: {
    getref() {
     // 表示從 $refs對(duì)象 中, 獲取 ref 屬性值為: h2ele DOM元素或組件
      console.log(this.$refs.h2Ele.innerText);
      this.$refs.h2ele.style.color = 'red';// 修改html樣式

     console.log(this.$refs.ho.msg);// 獲取組件數(shù)據(jù)
     console.log(this.$refs.ho.test);// 獲取組件的方法
    }
   }

以上這篇vue基本使用--refs獲取組件或元素的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

vue基本使用--refs獲取組件或元素的實(shí)例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽