在vue2中使用ref步奏詳解

這次帶給大家在vue2中使用ref步奏詳解，在vue2中使用ref的注意事項有哪些，以下就是實戰案例，一起來看一下。

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

1、我們先定義兩個元件

html部分

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

js部分

  Vue.component('navbar',{
    template:'<p>{{navs}}</p>',
    data:function () {
     return {
      navs:1
     }
    }
   });
  Vue.component('pagefooter',{
    template:'<p>{{footer}}</p>',
    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:'#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);
    }
   })

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

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

他的作用和：

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

的作用一樣

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

#

以上是在vue2中使用ref步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！