vue 组件高级用法实例详解

}
},
components: {
comA: {
template: '<div>组件A</div>'
},
comB: {
template: '<div>组件B</div>'
},
comC: {
template: '<div>组件C</div>'
}
}
});

 四、异步组件

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

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

 <div id="app22">
      <my-component22></my-component22>
    </div>
Vue.component('my-component22',function(resolve, reject){
  window.setTimeout(function(){
    resolve({
      template: '<div>我是异步渲染的</div>'
    })
  },2000)
});
var app22 = new Vue({
  el: '#app22'
});

工厂函数接收一个resolve 回调，在收到从服务器下载的组件定义时调用。也可以调用reject( reason ）指示加载失败。
这里setTimeout 只是为了演示异步，具体的下载逻辑可以自己决定，比如把组件配置写成一个对象配置，通过Ajax 来请求，然后调用resolve 传入配置选项。

总结

以上所述是小编给大家介绍的vue 组件高级用法实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！