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

vue中的ref和$refs的使用

 更新時(shí)間:2018年11月22日 14:38:56   作者:隨她  
這篇文章主要介紹了vue中的ref和$refs的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

ref:被用來(lái)給元素或子組件注冊(cè)引用信息,引用信息將會(huì)注冊(cè)在父組件的$refs對(duì)象上。如果在普通的DOM元素上使用,那么指向的就是普通的DOM元素。

ref 有三種用法:

1、ref 加在普通的元素上,用this.ref.name 獲取到的是dom元素

2、ref 加在子組件上,用this.ref.name 獲取到的是組件實(shí)例,可以使用組件的所有方法。

3、如何利用 v-for 和 ref 獲取一組數(shù)組或者dom 節(jié)點(diǎn)

普通的DOM元素上使用

<div id="app7">
  <input type="text"ref="TEXT"/ >
  <button @click="add">添加</button>
</div>
var app7=new Vue({
  el:"#app7",
  data:{

  },
  methods:{
    add:function(){
      console.log(this.$refs);
    }
  }
})

子組件上使用

<div id="app7">
  <aaa ref=inputText></aaa>
  <input type="text"ref="TEXT" >
  <button @click="add">添加</button>
</div>
 Vue.component('aaa',{
    template:"<div>我是一個(gè)組件</div>"
  })
  var app7=new Vue({
    el:"#app7",
    data:{

    },
    methods:{
      add:function(){
        console.log(this.$refs.inputText);
        console.log(this.$refs);
      }
    }
  })
  var aaa=app7.$refs.inputText;
  //console.log(aaa);
  //console.log(aaa.$el.innerText);

$refs:一個(gè)對(duì)象,持有注冊(cè)過(guò) ref 特性 的所有 DOM 元素和組件實(shí)例

注意:$refs只會(huì)在組件渲染完成之后生效,并且它們不是響應(yīng)式的。這只意味著一個(gè)直接的子組件封裝的“逃生艙”——你應(yīng)該避免在模板或計(jì)算屬性中訪問(wèn) $refs

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue.js教程之計(jì)算屬性

    Vue.js教程之計(jì)算屬性

    Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便,但它最合適的使用場(chǎng)景是簡(jiǎn)單的布爾操作或字符串拼接。這篇文章給大家介紹了Vue.js教程之計(jì)算屬性,非常不錯(cuò),感興趣的的朋友一起看看吧
    2016-11-11
  • vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法

    vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法

    這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法,需要的朋友可以參考下
    2022-03-03
  • vue簡(jiǎn)易記事本開(kāi)發(fā)詳解

    vue簡(jiǎn)易記事本開(kāi)發(fā)詳解

    這篇文章主要為大家詳細(xì)介紹了vue簡(jiǎn)易記事本的開(kāi)發(fā)過(guò)程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件

    vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件

    本篇文章主要介紹了vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件,具有一定的參考價(jià)值,有興趣的可以了解一下
    2017-08-08
  • 在Vue中使用echarts的方法

    在Vue中使用echarts的方法

    這篇文章主要介紹了Vue中使用echarts的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2018-02-02
  • vue實(shí)現(xiàn)自定義表格工具擴(kuò)展

    vue實(shí)現(xiàn)自定義表格工具擴(kuò)展

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義表格工具擴(kuò)展,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue之webpack -v報(bào)錯(cuò)解決方案總結(jié)

    vue之webpack -v報(bào)錯(cuò)解決方案總結(jié)

    這篇文章主要介紹了vue之webpack -v報(bào)錯(cuò)解決方案總結(jié),本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • 詳解為element-ui的Select和Cascader添加彈層底部操作按鈕

    詳解為element-ui的Select和Cascader添加彈層底部操作按鈕

    這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開(kāi)發(fā),路由配置方式

    vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開(kāi)發(fā),路由配置方式

    今天小編就為大家分享一篇vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開(kāi)發(fā),路由配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11
  • vite搭建vue2項(xiàng)目的實(shí)戰(zhàn)過(guò)程

    vite搭建vue2項(xiàng)目的實(shí)戰(zhàn)過(guò)程

    自從體驗(yàn)了一下vite之后,真的太快了,然而對(duì)vue3還不是很熟練,就想著在vue2的項(xiàng)目中使用以下vite,下面這篇文章主要給大家介紹了關(guān)于vite搭建vue2項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
    2022-11-11

最新評(píng)論