집 > 기사 > 웹 프론트엔드 > vue.js 구성 요소의 전역 등록과 로컬 등록에 대한 간략한 소개와 예시 분석

vue.js 구성 요소의 전역 등록과 로컬 등록에 대한 간략한 소개와 예시 분석

不言원래의: 2018-08-11 16:15:531783검색

이 글은 vue.js 구성요소의 글로벌 등록과 로컬 등록에 대한 간략한 소개와 예시 분석을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 글로벌 등록 인스턴스(다음은 공식 홈페이지의 예시에 따른 코드입니다.)

  <div id="app">
     <com-btn></com-btn>
     <com-btn></com-btn>
 </div>

<script>
        Vue.component(&#39;com-btn&#39;,{
            data:function(){
                return{
                    num:0,
                }
            },
            template:`<button v-on:click=&#39;change&#39;>点我{{num}}次</button>`,
            methods:{
                change:function(){
                    this.num += 1;
                }
            }
        })
       var vm = new Vue({
           el:&#39;#app&#39;,
           data:{

           },
           
       })
    </script>

컴포넌트를 등록할 때 com-btn과 같은 이름을 지정해야 함을 알 수 있습니다. 컴포넌트 이름

Vue.component(&#39;my-component-name&#39;, { /* ... */ })

우리가 등록한 컴포넌트 com-btn의 첫 번째 매개변수입니다. 이 컴포넌트는 등록된 후 새로 생성된 모든 vue 루트 인스턴스(새 Vue)에서 사용할 수 있습니다.

모든 구성 요소가 적용되려면 루트 인스턴스 앞에 작성되어야 한다는 점은 주목할 가치가 있습니다.

2 지역 조상 서적의 예

<script>
        var childcom ={
            data:function(){
                return{
                    num:0,
                }
            },
            template:`<button v-on:click=&#39;change&#39;>点我{{num}}次</button>`,
            methods:{
                change:function(){
                    this.num += 1;
                }
            }
        }
       var vm = new Vue({
           el:&#39;#app&#39;,
           data:{

           },
           components:{
               &#39;com-btn&#39;:childcom,//调用这个组件
           }
       })
    </script>

로컬 등록의 장점은 webpack과 같은 빌드 시스템을 사용할 때 글로벌 등록을 통해 컴포넌트를 등록하면, 특정 컴포넌트를 사용하지 않을 때 최종 빌드 결과에 계속 존재하게 되어 불필요한 js 다운로드가 늘어나게 됩니다.

그러므로 간단한 js 객체를 통해 구성 요소를 등록할 수 있습니다

var ComponentA = { /* ... */ }

이 구성 요소를 사용해야 하는 경우 루트 인스턴스에서 정의된 구성 요소를 호출하기만 하면 됩니다.

new Vue({
  el: &#39;#app&#39;
  components: {
    &#39;component-a&#39;: ComponentA,
    &#39;component-b&#39;: ComponentB
  }
})

루트 인스턴스의 속성 이름이 구성 요소라는 점에 주목할 가치가 있습니다. s를 잊지 마세요. 구성 요소의 다른 속성은 인스턴스의 속성과 동일하지만 데이터는 함수여야 합니다.

구성 요소 개체의 각 속성은 사용자 정의 구성 요소의 이름이고 속성 값은 이 구성 요소의 옵션 개체입니다.

부분적으로 등록된 구성 요소는 해당 하위 구성 요소에서 사용할 수 없습니다. 구성 요소 A를 구성 요소 B에서 사용할 수 있도록 하려면 다음과 같이 작성해야 합니다.

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    &#39;component-a&#39;: ComponentA
  },
  // ...
}

vue.js 구성 요소의 전역 등록과 로컬 등록에 대한 간략한 소개와 예시 분석

관련 기사