Vue.js组件高级特性有哪些用法

这篇文章主要介绍了Vue.js组件高级特性有哪些用法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联公司致力于互联网网站建设与网站营销,提供成都网站设计、成都网站建设、网站开发、seo优化、网站排名、互联网营销、微信小程序、公众号商城、等建站开发,成都创新互联公司网站建设策划专家,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。

具体如下:

1 递归

为组件设置 name属性,这个组件就可以在自身的模板内递归调用自己。

html:


  

js:

Vue.component('deniro-component',{
  name:'deniro-component',
  props:{
    count:{
      type:Number,
      default:1
    }
  },
  template:'\
  \
  

{{count}} 微信大变样!看了这些新功能后,网友淡定不住了

\     \   
\   ' }); var app = new Vue({   el: '#app',   data: {} });

效果:

Vue.js组件高级特性有哪些用法

渲染结果:

Vue.js组件高级特性有哪些用法

可以利用组件的可递归特性,来实现一些具有不确定层级的组件,比如级联选择器和树型组件。

2 内联模板

一般情况下,组件的模板都是在 template 中定义的。我们也可以在组件标签中加上 inline-template 属性,这样组件就会把它的内容作为实际的模板内容。

内联模板可以接收父、子组件中声明的数据,所以更加灵活。

html:


  
    
      

父组件中定义子组件模板

      

{{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;     }   } });

效果:

Vue.js组件高级特性有哪些用法

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' });

效果:

Vue.js组件高级特性有哪些用法

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

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

完整实例代码:





vue.js组件高级特性




  


  
    
      

父组件中定义子组件模板

      

{{content1}}

      

{{content2}}

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

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


文章题目:Vue.js组件高级特性有哪些用法
文章网址:http://hbruida.cn/article/pddscg.html

其他资讯