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>'

 })

<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>

   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'

              }

            ]

          }

        });