vue组件高级用法实例详解

  

   
  
Vue.component('my-component19',{
 name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件，全局的ID会被自动设置为组件的name。
 props: {
  count: {
   type: Number,
   default: 1
  }
 },
 template: '
'
});
var app19 = new Vue({
 el: '#app19'
});

   
    

     
在父组件中定义子组件的模板
     
{{msg}}
    
   
  
Vue.component('my-component20',{
 data: function(){
  return {
   msg: '在子组件声明的数据'
  }
 }
});
var app20 = new Vue({
 el: '#app20'
});

   
   切换到A
   切换到B
   切换到C
  
var app21 = new Vue({
 el: '#app21',
 data: {
  currentView: 'comA'
 },
 methods: {
  changeView: function(data){
   this.currentView = 'com'+ data　　//动态地改变currentView的值就可以动态挂载组件了。
  }
 },
 components: {
  comA: {
   template: '
组件A
'
  },
  comB: {
   template: '
组件B
'
  },
  comC: {
   template: '
组件C
'
  }
 }
});

 

      
    
Vue.component('my-component22',function(resolve, reject){
  window.setTimeout(function(){
    resolve({
      template: '
我是异步渲染的
'
    })
  },2000)
});

var app22 = new Vue({
  el: '#app22'
});