vue组件的高级使用方法

1，递归组件

组件在它的模板内可以递归地调用自己， 只要给组件设置name 的选项就可以了。

 

       
 

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

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

});

设置name 后，在组件模板内就可以递归使用了，不过需要注意的是，必须给一个条件来限制递归数量，否则会抛出错误： max stack size exceeded 。

组件递归使用可以用来开发一些具有未知层级关系的独立组件，比如级联选择器和树形控件等。

2，内联模板

组件的模板一般都是在template 选项内定义的， Vue 提供了一个内联模板的功能，在使用组件时，给组件标签使用inline-template 特性，组件就会把它的内容当作模板，而不是把它当内容分发，这让模板更灵活。

   
   

     

在父组件中定义子组件的模板

     

{{msg}}

   

   
 

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

});

3，动态组件

Vue.js 提供了一个特殊的元素＜component> 用来动态地挂载不同的组件， 使用is特性来选择要挂载的组件

   
   切换到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

'
  }
 }

});

4、异步组件

当你的工程足够大， 使用的组件足够多时， 是时候考虑下性能问题了， 因为一开始把所有的组件都加载是没必要的一笔开销。

好在Vue.js 允许将组件定义为一个工厂函数，动态地解析组件。Vue. 只在组件需要渲染时触发工厂函数， 并且把结果缓存起来，用于后面的再次渲染。   

     
   

Vue.component('my-component22',function(resolve, reject){
  window.setTimeout(function(){
    resolve({
      template: '

我是异步渲染的

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

;

工厂函数接收一个resolve 回调，在收到从服务器下载的组件定义时调用。也可以调用reject( reason ）指示加载失败。

这里setTimeout 只是为了演示异步，具体的下载逻辑可以自己决定，比如把组件配置写成一个对象配置，通过Ajax 来请求，然后调用resolve 传入配置选项。

遇到坑请查看

https://blog.csdn.net/xiaomogg/article/details/79606384