vue 組件 全局注冊和局部注冊

全局注冊，注冊的組件需要在初始化根實例之前注冊了組件；

局部注冊，通過使用組件實例選項注冊，可以使組件僅在另一個組件或者實例的作用域中可用：

全局組件

js

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

局部組件demo：

html

<div 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>
    <div class="tabContent">
      <div v-for="navTab in navTabs" is="tab-content" v-bind:content="navTab.tabContent" 
      v-bind:class="['tab-panel',{active:navTab.isActive}]" v-if="navTab.isActive"></div>
    </div>
    </div>

js

   var app=new Vue({
            el: '#app',
          components: {
              'tab-title': {
                props:['info'],//接受父元素傳遞的參數
                template:'<li v-on:click="$emit(\'addactive\')">{{info}}</li>'//點擊時傳遞通過$emit子元素傳遞給父元素調用 addactive方法（不能使用駝峰寫法）
                },
              'tab-content':{
                 props:["content"],
                template:'<div>{{content}}</div>'
              }
          },
          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 選項聲明它期待獲得的數據

在模板中，要動態地綁定父組件的數據到字模板的props,與綁定到任何普通的HTMO特性相類似。就是使用 v-bind。每當父組件的數據變化時，該變化也會傳遞給子組件：

 

所有的vuejs組件都是被擴展的vue實例

每一個Vue實例都會代理這個實例的data屬性對象里的所有的屬性

所有的Vue實例本身保羅的屬性和方法，都以$開頭來區別，對應Vue.set

例如：

vm.$data

vm.$methods

vm.$watch

這個有利於和data屬性對象的數據來區分

多有的指令都以v-xxx形式存在：