집 > 기사 > 웹 프론트엔드 > Vue 구성 요소에서 전역 등록 및 로컬 등록을 구현하는 방법

Vue 구성 요소에서 전역 등록 및 로컬 등록을 구현하는 방법

亚连원래의: 2018-06-02 16:52:262070검색

이제 Vue 구성요소의 글로벌 등록 및 로컬 등록 구현에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

글로벌 등록, 등록된 구성 요소는 루트 인스턴스를 초기화하기 전에 등록해야 합니다.

부분 등록, 구성 요소 인스턴스 옵션을 사용하여 등록하면 구성 요소를 다른 구성 요소 또는 인스턴스의 범위에서만 사용할 수 있습니다.

전역 구성 요소

Vue.component(&#39;tab-title&#39;,{
   props:[&#39;title&#39;],
   template:&#39;<li v-on:click="$emit(\&#39;change\&#39;)">{{title}}</li>&#39;
 })
 Vue.component(&#39;tab-content&#39;,{
   props:[&#39;content&#39;],
   template:&#39;<p>{{content}}</p>&#39;
 })

로컬 구성 요소 데모:

html

<p id="app">
  <ul class="navTab">
   <li v-for="(navTab,index) in navTabs" is="tab-title" v-bind:info="navTab.text" v-bind:class="{active:navTab.isActive}" v-on:addactive="switchActive(index)"></li>
  </ul>
  <p class="tabContent">
   <p v-for="navTab in navTabs" is="tab-content" v-bind:content="navTab.tabContent" 
   v-bind:class="[&#39;tab-panel&#39;,{active:navTab.isActive}]" v-if="navTab.isActive"></p>
  </p>
  </p>

var app=new Vue({
      el: &#39;#app&#39;,
     components: {
       &#39;tab-title&#39;: {
        props:[&#39;info&#39;],//接受父元素传递的参数
        template:&#39;<li v-on:click="$emit(\&#39;addactive\&#39;)">{{info}}</li>&#39;//点击时传递通过$emit子元素传递给父元素调用 addactive方法（不能使用驼峰写法）
        },
       &#39;tab-content&#39;:{
         props:["content"],
        template:&#39;<p>{{content}}</p>&#39;
       }
     },
     methods:{
       switchActive:function(index){
        for(var i=0;i<this.navTabs.length;i++){
         this.navTabs[i].isActive=false;
        }
        this.navTabs[index].isActive=true;
        
       }
     },
     data:{
      navTabs:[
       {
        text:"tab1",
        isActive:true,
        tabContent:&#39;this is tab1 content&#39;
       },
       {
        text:"tab2",
        isActive:false,
        tabContent:&#39;this is tab2 content&#39;
       },
       {
        text:"tab3",
        isActive:false,
        tabContent:&#39;this is tab3 content&#39;
       }
      ]
     }
    });

구성 요소 인스턴스의 범위 격리되어 있습니다. 이는 상위 구성 요소의 데이터를 하위 구성 요소의 템플릿에서 직접 참조할 수 없음을 의미합니다. 자식 컴포넌트가 부모 컴포넌트의 데이터를 사용하게 하려면 자식 컴포넌트의 props 옵션을 전달해야 합니다.

하위 구성 요소는 props 옵션을 사용하여 얻을 것으로 예상되는 데이터를 명시적으로 선언해야 합니다.

템플릿에서 상위 구성 요소의 데이터는 하위 템플릿의 props에 동적으로 바인딩되어야 합니다. 이는 다음과 같습니다. 유사한 일반적인 HTMO 기능에 바인딩합니다. 그냥 v-bind를 사용하세요. 상위 구성 요소의 데이터가 변경될 때마다 변경 사항이 하위 구성 요소에도 전달됩니다.

모든 vuejs 구성 요소는 확장된 vue 인스턴스입니다.

각 Vue 인스턴스는 이 인스턴스의 모든 데이터 속성 개체를 프록시합니다.

의 속성

Vue 인스턴스 자체의 모든 속성과 메서드는 Vue.set

에 해당하는 $로 시작하여 구별됩니다. 예:

vm.$data

vm.$methods

vm.$watch

이것은 데이터 속성 개체의 데이터와 구별하는 데 도움이 됩니다.

많은 명령어가 v-xxx 형식으로 존재합니다.

위는 제가 모든 사람을 위해 컴파일한 것입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Vue 구성 요소에서 전역 등록 및 로컬 등록을 구현하는 방법

관련 기사