重庆分公司

• 首页
• 关于我们
• 服务项目
  

  高端网站定制

  

  微信定制

  

  APP开发服务

  

  网络营销服务

  

  电商网站建设

  

  生物医药网站建设

  

  外贸网站建设

  

  教育培训网站建设
• 小程序开发
• 案例展示
  

  网站建设

  

  小程序

  

  电商平台

  

  APP

  

  系统平台
• 建站知识
• 联系我们

咨询热线 ：

028-86922220

Vue.component('deniro-component',{
  name:'deniro-component',
  props:{
    count:{
      type:Number,
      default:1
    }
  },
  template:'\
  \
  
{{count}} 微信大变样!看了这些新功能后，网友淡定不住了
\
    \
  

  
    

      
父组件中定义子组件模板
      
{{content1}}
      
{{content2}}
    
  

js：

Vue.component('deniro-component2',{
  data:function () {
    return {
      content1:'双屏手机一碰就碎？实测结果意外（来源于子组件）'
    }
  }
});
var app2 = new Vue({
  el: '#app2',
  data: {
    content2:'AI正在改变所有行业 咖啡也将被消灭（来源于父组件）'
  }
});

渲染结果：

 

  
父组件中定义子组件模板
  
双屏手机一碰就碎？实测结果意外（来源于子组件）
  
AI正在改变所有行业 咖啡也将被消灭（来源于父组件）
 

如果父子组件定义的数据同名，那么优先使用子组件中的数据。

因为作用域较难理解，所以除非必要，否则不建议使用。

3 动态加载

我们可以使用 is 来实现动态挂载组件。

html：

  
  切换到 A 组件
  切换到 B 组件
  切换到 C 组件

js：

var app3 = new Vue({
  el: '#app3',
  components: {
    componentA: {
      template: '
组件 A
'
    },
    componentB: {
      template: '
组件 B
'
    },
    componentC: {
      template: '
组件 C
'
    }
  },
  data: {
    currentView: 'componentA'
  },
  methods: {
    change: function (component) {
      this.currentView = 'component' + component;
    }
  }
});

效果：

data 中的 is 变量也可以直接绑定组件对象。

html：

js：

var news={
  template:'
无人机送快递 渐行渐近
'
}
var app4 = new Vue({
  el: '#app4',
  data: {
    currentView: news
  }
});

渲染结果：

 
无人机送快递 渐行渐近

4 异步加载

当工程变得越来越大时，就需要考虑性能喽。我们可以把组件定义成一个工厂函数，实现组件动态解析。Vue.js 会把本次渲染后的结果缓存起来，从而提高性能。

html：

js：

Vue.component('deniro-component5', function (resolve,reject) {
  window.setTimeout(function () {
    resolve({
      template:'
全球首个5G电话拨通
'
    });
  },1000);
});
var app5 = new Vue({
  el: '#app5'
});

效果：

这里使用 setTimeout 来模拟异步下载，下载成功后会调用 resolve 方法。

一般情况下，会把组件的配置定义为对象配置，然后通过 Ajax 请求组件配置信息，最后通过 resolve 传入这些配置。

完整实例代码：

  


  
    

      
父组件中定义子组件模板
      
{{content1}}
      
{{content2}}
    
  


  
  切换到 A 组件
  切换到 B 组件
  切换到 C 组件


  


  

感谢你能够认真阅读完这篇文章，希望小编分享的“Vue.js组件高级特性有哪些用法”这篇文章对大家有帮助，同时也希望大家多多支持创新互联成都网站设计公司，关注创新互联成都网站设计公司行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4