精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
Vue.js组件高级特性有哪些用法-创新互联
这篇文章主要介绍了Vue.js组件高级特性有哪些用法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联公司是一家专注于
网站制作、成都网站制作与策划设计,沾化网站建设哪家好?
创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:沾化等地区。沾化做网站价格咨询:028-86922220
具体如下：
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: {}
});
效果：
渲染结果：
可以利用组件的可递归特性，来实现一些具有不确定层级的组件，比如级联选择器和树型组件。
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;
}
}
});效果：
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 传入这些配置。
完整实例代码：
vue.js组件高级特性
父组件中定义子组件模板
{{content1}}
{{content2}}
切换到 A 组件
切换到 B 组件
切换到 C 组件
