欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2019年11月07日 17:29:57   作者：晨曦之光11  
今天小編就為大家分享一篇vue基本使用--refs獲取組件或元素的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起個(gè)跟隨小編過(guò)來(lái)看看吧

說(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">
  <h1 ref="h1Ele">這是H1</h1>
  <hello ref="ho"></hello>

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

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

methods: {
    getref() {
     // 表示從 $refs對(duì)象 中, 獲取 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獲取組件或元素的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論