vuejs 异步数据与选项卡

vuejs 异步数据与选项卡

v-if 表达式的值改变时，当前组件就会重新渲染，同时mounted也会执行；
v-show 看起来与mounted没什么关系，组件加载以及mounted执行，不受v-show影响；

目前的景需求是：父组件异步加载数据传递给子组件。
为了确保期望达成，选项卡的每一项必须使用v-show不能使用v-if，这样保证选项只渲染一次：

          <div v-show="curtab=='t1'" class="row">t1</div>
          <div v-show="curtab=='t2'" class="row">t1</div>
          <div v-show="curtab=='t3'" class="row">t1</div>

另外子组件用需要由 v-if 来控制，异步加载完成后inited赋值true，子组件添加v-if=“inited==true”：

Vue.component('parent-component',{
    props:[],
    data: function() {
      return {
      	inited:false,
      	tablist:{
      		t1:'tab1',
      		t2:'tab2',
      		t3:'tab3',
      	},
      	curtab:'t1',
      };
    },

    created: function () {
      this.init();
    },

    methods:{

      // init start
      init: function(){        
        var me = this;
        appCore.getJSON(appCore.url('read'), {init:1}, function(res){
          if(res.code==0){
            me.inited = true;
            for(var k in res.data){
              me[k] = res.data[k];
            }
          }
        });
      },
      // init end
      
	  // setTab start
      setTab: function(tab){
        this.curtab = tab;
      },
      // setTab end

    },

    template:`  <div class="d-flex">
   	  <div class="card " >
        <div class="card-header">          
          <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item" v-for="(v,k) in tablist">
              <a href="javascript:;" class="nav-link"  
                :class="{active:k==curtab}" 
                @click="setTab(k)">{{v}}</a>
            </li>
          </ul>
        </div>
        <div class="card-body">
          <div v-show="curtab=='t1'" class="row">
          	<child-component v-if="inited==true" ></child-component>
          </div>
          <div v-show="curtab=='t2'" class="row">
          	<child-component v-if="inited==true" ></child-component>
          </div>
          <div v-show="curtab=='t3'" class="row">
          	<child-component v-if="inited==true" ></child-component>
          </div>
        </div>
      </div>

      </div>`,