vue2의 ref 단계 사용에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-04-16 14:04:39
원래의
1582명이 탐색했습니다.

이번에는 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의 nav와 pagefooter의 바닥글 값에 직접 액세스하는 방법은 무엇입니까? ref가 사용되는 곳입니다

2. 심판 사용

구성 요소 수정

  <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿