vue2里面ref的具體使用方法

更新時間：2017年10月27日 09:30:41 作者：conquer_冷憶

本篇文章主要介紹了vue2里面ref的具體使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了vue2里面ref的具體使用方法，分享給大家，具體如下。

1、我們先定義兩個組件

html部分

  <div id="app">
   <navbar ></navbar>
   <pagefooter ></pagefooter>
  </div>

js部分

  Vue.component('navbar',{
    template:'<div>{{navs}}</div>',
    data:function () {
     return {
      navs:1
     }
    }
   });
  Vue.component('pagefooter',{
    template:'<div>{{footer}}</div>',
    data:function () {
     return {
      footer:11
     }
    }
   });

這里怎么直接訪問navbar的navs和pagefooter的footer值呢？這就用到ref了

2、ref的使用

修改組件

  <div id="app">
   <navbar ref="navbar"></navbar>
   <pagefooter ref="pagefooter"></pagefooter>
  </div>
   new Vue({
    el:'#app',
    created:function(){
     
    },
    mounted:function () {
     this.$refs.navbar.navs=222
     //ready,
     //這里怎么直接訪問navbar的navs和pagefooter的footer值呢，
      console.log(this.$refs.navbar.navs);
      console.log(this.$refs.pagefooter.footer);
    }
   })

如果僅僅用到一個普通標(biāo)簽上

<div ref="demo"></div>

他的作用和：

document.querySelector('[ref=demo]');

的作用一樣

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

您可能感興趣的文章:

相關(guān)文章

vue實現(xiàn)畫筆回放canvas轉(zhuǎn)視頻播放功能
這篇文章主要介紹了vue實現(xiàn)畫筆回放，canvas轉(zhuǎn)視頻播放功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2024-01-01
Vue3組合式API中如何優(yōu)化列表渲染性能
這篇文章主要為大家詳細(xì)介紹了在Vue3組合式API中如何優(yōu)化列表渲染性能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-12-12
Vue+Bootstrap收藏（點贊）功能邏輯與具體實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap收藏（點贊）功能邏輯與具體實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
vue中的slot封裝組件彈窗
這篇文章主要介紹了vue中的slot封裝組件彈窗，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
淺析Vue實例以及生命周期
這篇文章給大家分享了Vue實例以及生命周期的相關(guān)知識點內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。
2018-08-08
詳解Vue生命周期的示例
本篇文章主要介紹了詳解Vue生命周期的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
vue自定義開關(guān)組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue自定義開關(guān)組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
vue-cli+axios實現(xiàn)文件上傳下載功能(下載接收后臺返回文件流)
這篇文章主要介紹了vue-cli+axios實現(xiàn)文件上傳下載功能(下載接收后臺返回文件流),本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-05-05
vue打包(hash和history)部署詳細(xì)步驟
這篇文章主要介紹了vue打包(hash和history)部署詳細(xì)步驟,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue+ts大文件切片上傳的實現(xiàn)示例
在Vue項目中,大圖片和多數(shù)據(jù)Excel等大文件的上傳是一個非常常見的需求，本文主要介紹了vue+ts大文件切片上傳，具有一定的參考價值，感興趣的可以了解一下
2024-01-01