首頁 > web前端 > js教程 > vue2裡面ref的使用方法

vue2裡面ref的使用方法

小云云
發布: 2018-01-02 09:47:35
原創
1930 人瀏覽過

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

1、我們先定義兩個元件

html部分


#
  <p id="app">
   <navbar ></navbar>
   <pagefooter ></pagefooter>
  </p>
登入後複製

js部分


  Vue.component(&#39;navbar&#39;,{
    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(&#39;[ref=demo]&#39;);
登入後複製
的作用一樣

相關推薦:

jQuery 循環遍歷改變a標籤的href詳解

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

#html中關於a標籤的onclick以及href的執行順序詳解#

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板