这篇文章主要介绍了Vue.js组件高级特性,结合实例形式详细分析了vue.js组件递归、模板、动态加载、渲染等相关操作技巧,需要的朋友可以参考下
本文实例讲述了Vue.js组件高级特性。分享给大家供大家参考，具体如下：
1 递归
为组件设置 name 属性，这个组件就可以在自身的模板内递归调用自己。
html：
<div id="app"> </div>
js：
Vue.component('deniro-component',{ name:'deniro-component', props:{ count:{ type:Number, default:1 } }, template:'\ <div class="child">\ <p>{{count}} 微信大变样!看了这些新功能后，网友淡定不住了</p>\ <deniro-component\ :count="count + 1"\ v-if="count \ </div>\ ' }); var app = new Vue({ el: '#app', data: {} });
渲染结果：
可以利用组件的可递归特性，来实现一些具有不确定层级的组件，比如级联选择器和树型组件。
2 内联模板
一般情况下，组件的模板都是在 template 中定义的。我们也可以在组件标签中加上 inline-template 属性，这样组件就会把它的内容作为实际的模板内容。
内联模板可以接收父、子组件中声明的数据，所以更加灵活。
html：
<div id="app2"> <div> <h2>父组件中定义子组件模板</h2><p>{{content1}}</p><p>{{content2}}</p></div></div>
js：
Vue.component('deniro-component2',{ data:function () { return { content1:'双屏手机一碰就碎？实测结果意外（来源于子组件）' } } }); var app2 = new Vue({ el: '#app2', data: { content2:'AI正在改变所有行业 咖啡也将被消灭（来源于父组件）' } });
渲染结果：
<div id="app2"> <div> <h2>父组件中定义子组件模板</h2><p>双屏手机一碰就碎？实测结果意外（来源于子组件）</p><p>AI正在改变所有行业 咖啡也将被消灭（来源于父组件）</p></div></div>
如果父子组件定义的数据同名，那么优先使用子组件中的数据。
因为作用域较难理解，所以除非必要，否则不建议使用。
3 动态加载
我们可以使用 is 来实现动态挂载组件。
html：
<div id="app3"> <button>切换到 A 组件</button><button>切换到 B 组件</button><button>切换到 C 组件</button></div>
js：
var app3 = new Vue({ el: '#app3', components: { componentA: { template: '<div>组件 A</div>'<b style="color:transparent">本文来源gao@!dai!ma.com搞$$代^@码网*</b> }, componentB: { template: '<div>组件 B</div>' }, componentC: { template: '<div>组件 C</div>' } }, data: { currentView: 'componentA' }, methods: { change: function (component) { this.currentView = 'component' + component; } } });
data 中的 is 变量也可以直接绑定组件对象。
html：
<div id="app4"> </div>
js：
var news={ template:'<p>无人机送快递 渐行渐近</p>' } var app4 = new Vue({ el: '#app4', data: { currentView: news } });
渲染结果：
<div id="app4"> <p>无人机送快递 渐行渐近</p></div>
4 异步加载
当工程变得越来越大时，就需要考虑性能喽。我们可以把组件定义成一个工厂函数，实现组件动态解析。Vue.js 会把本次渲染后的结果缓存起来，从而提高性能。
html：
<div id="app5"> </div>
js：
Vue.component('deniro-component5', function (resolve,reject) { window.setTimeout(function () { resolve({ template:'<div>全球首个5G电话拨通</div>' }); },1000); }); var app5 = new Vue({ el: '#app5' });
这里使用 setTimeout 来模拟异步下载，下载成功后会调用 resolve 方法。
一般情况下，会把组件的配置定义为对象配置，然后通过 Ajax 请求组件配置信息，最后通过 resolve 传入这些配置。
完整实例代码：
<title>vue.js组件高级特性</title> <div id="app"> </div><div id="app2"> <div> <h2>父组件中定义子组件模板</h2><p>{{content1}}</p><p>{{content2}}</p></div></div><div id="app3"> <button>切换到 A 组件</button><button>切换到 B 组件</button><button>切换到 C 组件</button></div><div id="app4"> </div><div id="app5"> </div>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.gaodaima.com/code/HtmlJsRun 测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
以上就是Vue.js组件高级特性实例详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：Vue.js组件高级特性实例详解
