vue2裡面ref的具體使用方法詳解

本文主要介紹了vue2裡面ref的具體使用方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

1、我們先定義兩個元件

html部分

#

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

js部分

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

這裡怎麼直接存取navbar的navs和pagefooter的footer值呢？這就用到ref了

2、ref的使用

#修改元件

  <p id="app">
   <navbar ref="navbar"></navbar>
   <pagefooter ref="pagefooter"></pagefooter>
  </p>
   new Vue({
    el:&#39;#app&#39;,
    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);
    }
   })

如果只用到一個普通標籤上

<p ref="demo"></p>

他的作用和：

##

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

的作用一樣

相關推薦：

詳解css中href和src、link和@import的區別

react.js給予識別ref ，取得內容

react native 中View元件中的ref屬性介紹

以上是vue2裡面ref的具體使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！