本文展示了Vue.js组件的高级特性。分享给大家参考，如下：

1递归

为组件设置name属性，组件可以在其自己的模板中递归调用自己。

html:

div id=' app ' deniro-component : count=' 1 '/deniro-component/div js:

vue.component(' de Niro-component '，{name :' de Niro-component '，prop : { count 3360 { type : number，default 33601}}，template 3360 ' div class=' child ' p { { count } }。看完这些新功能，网友们静不下来/p deniro-component : count=' count 1 ' v-if=' count 3 '/deniro-component /div ' })；var app=new Vue({ el: '#app '，data : { })；效果：

渲染结果：

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

2内嵌模板

通常，组件的模板是在模板中定义的。我们还可以将内联模板属性添加到组件标签中，这样组件就可以将其内容作为实际的模板内容。

内联模板可以接收在父组件和子组件中声明的数据，因此它们更加灵活。

html:

div id=' app 2 ' deniro-component 2 line-template div H2在父组件/h2p { { content 1 } }/p p { { content 2 } }/p/div/deniro-component 2/div js中定义子组件模板：

Vue.com(' deniro-component 2 '，{ data : function(){ return { content 1: ')，双屏手机碰一下就坏了？意外的测量结果(从子组件)“} } })；varap 2=new vue({ El : ' # app 2 '，data: {content2:' ai正在改变所有行业，咖啡将被淘汰(从父组件)' })；渲染结果：

Div id=' app2' div。H2母组件/h2 p双屏手机中定义的子组件模板碰了就坏了？意外的测量结果(来自子组件)/p pAI正在发生变化，所有行业的咖啡都将被淘汰(来自父组件)/p /div/div如果父组件和子组件定义的数据同名，将首先使用子组件中的数据。

因为范围很难理解，除非必要，否则不建议使用。

3动态负载

我们可以使用的是动态安装组件。

html:

div id=' app 3 ' deniro-component : is=' current view '/deniro-component 3 button @ click=' change(' a ')切换到组件/按钮按钮@click='change('C ')切换到C组件/按钮/divjs:

Varapp3=newvue ({el:' # app3 '，components : { components A : { template 3360 ' div组件A/div'}，Component b : { template : ' div组件c/div'})，data : {当前视图： '组件a'}，methods : { change : function }} }});效果：

数据中的Is变量也可以直接绑定到组件对象。

html:

div id=' app 4 ' deniro-component 4 : is=' CurrentView '/deniro-component 4/div js:

Var news={ template:'p无人机投放越来越近/p ' } var app 4=new vue({ El : ' # app 4 '，data : { currentview 3360 news } })；渲染结果：

Div ID=' app 4' pUAV逐步渐进地交付快递/p/div4异步加载

随着项目越来越大，需要考虑性能。我们可以将组件定义为工厂函数，实现组件的动态分析。Vue.js将缓存渲染结果以提高性能。

html:

div id=' app 5 ' deniro-component 5/deniro-component 5/div js:

Vue.com(' de Niro-component 5 '，函数(resolve，reject){ window . settimeout(function(){ resolve({ template : ' div世界上第一个5G电话呼叫/div ' })；},1000);});var app 5=new Vue({ El : ' # app 5 ' })；效果：

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

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

完整实例代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlevue.js组件高级特性/title脚本src=' http :https://cdn。bootcss。com/vue/2。4 .4/vue。量滴js '/script/headdydiv id=' app ' deniro-组件：计数=' 1 '/deniro-组件/div id=' app 2 ' deniro-组件2内联-模板div H2父组件中定义子组件模板/H2 p { { content 1 } }/p p { { content 2 } }/p/div/deniro-组件2/div id=' app3 ' deniro-组件3 : is=' currentView '/deniro-组件3 button @ click=' change '(' A ')切换到A组件/button button @click='change('B ')切换到B组件/button button @click='change('C ')切换到C组件/button/div div id=' app 4 ' deniro-组件4 : is=' CurrentView '/deniro-组件4/div div id=' app 5 ' deniro-组件5/deniro-组件5/div scriptvue。组件(' deniro-组件5 '，函数（解析，拒绝){ window.setTimeout(函数(){解析({模板3360 ' div全球首个5G电话拨通/div ' })；},1000);});var app 5=new Vue({ El : ' # app 5 ' })；var news={ template:'p无人机送快递渐行渐近/p ' } var app 4=new Vue({ El : ' # app 4 '，data : { currentview : news } })；var app3=new Vue({ el: '#app3 '，组件： {组件a : {模板： ' div组件A/div' }，组件b : {模板： ' div组件B/div' }，组件C: { template: 'div组件C/div' }，数据： { currentview : ' componentA ' }，方法： { change:函数（组件){ this.currentView='component '组件；} } });vue。组件(' deniro-component 2 '，{ data : function(){ return { content 1: '双屏手机一碰就碎？实测结果意外（来源于子组件)' } } });var app2=new Vue({ el: '#app2 '，data: { content2: 'AI正在改变所有行业咖啡也将被消灭（来源于父组件)' } });vue。组件(' deniro-component '，{ name: 'deniro-component '，prop : { count : { type : Number，default: 1 } }，模板： ' div class=' child ' p { { count } }微信大变样！看了这些新功能后，网友淡定不住了/p deniro-component : count=' count 1 ' v-if=' count 3 '/deniro-component /div ' })；var app=new Vue({ el: '#app '，数据： })；/脚本/正文/html感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。