Vue 글로벌 등록 및 로컬 등록 사용에 대한 자세한 설명

이번에는 vue 글로벌 등록 및 로컬 등록 사용에 대해 자세히 설명하겠습니다. vue 글로벌 등록 및 로컬 등록 사용 시 주의사항은 무엇인가요?

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

로컬 등록, 구성 요소 인스턴스 옵션으로 등록하면 구성 요소를 다른 구성 요소 또는 인스턴스의 범위에서만 사용할 수 있도록 만들 수 있습니다.

전역 구성 요소

js

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

로컬 구성요소 데모:

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>

js

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

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

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

템플릿에서는 일반 HTMLMO 속성에 바인딩하는 것과 유사하게 상위 구성 요소의 데이터를 하위 템플릿의 소품에 동적으로 바인딩합니다. 그냥 v-bind를 사용하세요. 상위 구성 요소의 데이터가 변경될 때마다 변경 사항이 하위 구성 요소에도 전달됩니다.

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

각 Vue 인스턴스는 인스턴스의 data

property

object에 있는 모든 속성 을 프록시합니다. Vue 인스턴스 자체의 모든

속성 및 메서드

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

예:

vm.$data

vm.$methods

vm.$watch 이는 데이터 속성 객체의 데이터와 구별하는 데 도움이 됩니다

v-xxx 형식으로 많은 지침이 존재합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

readline 콘텐츠를 한 줄씩 읽고 쓰는 방법

Vuex 돌연변이 및 동작 사용에 대한 자세한 설명

위 내용은 Vue 글로벌 등록 및 로컬 등록 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!