vue 组件高级用法实例详解

网友投稿 372 2023-02-08


vue 组件高级用法实例详解

一、递归组件

组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了。

示例如下:

vue.component('my-component19',{

name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件,全局的ID会被自动设置为组件的name。

props: {

count: {

type: Number,

default: 1

}

},

template: '

});

var app19 = new Vue({

el: '#app19'

});

渲染结果为:

设置name 后,在组件模板内就可以递归使用了,不过需要注意的是,必须给一个条件来限制递归数量,否则会抛出错误: max stack size exceeded 。

组件递归使用可以用来开发一些具有未知层级关系的独立组件,比如级联选择器和树形控件等。

二、内联模板

组件的模板一般都是在template 选项内定义的, Vue 提供了一个内联模板的功能,在使用组件时,给组件标签使用inline-template 特性,组件就会把它的内容当作模板,而不是把它当内容分发,这让模板更灵活。

示例如下: 

{{msg}}

Vue.component('my-component20',{

data: function(){

return {

msg: '在子组件声明的数据'

}

}

});

var app20 = new Vue({

el: '#app20'

});

三、动态组件

Vue.js 提供了一个特殊的元素<component> 用来动态地挂载不同的组件, 使用is特性来选择要挂载的组件。

示例如下:

var app21 = new Vue({

el: '#app21',

data: {

currentView: 'comA'

},

methods: {

changeView: function(data){

this.currentView = 'com'+ data  //动态地改变currentView的值就可以动态挂载组件了。

}

},

components: {

comA: {

template: '

},

comB: {

template: '

},

comC: {

template: '

}

}

});

四、异步组件

当你的工程足够大, 使用的组件足够多时, 是时候考虑下性能问题了, 因为一开始把所有的组件都加载是没必要的一笔开销。

好在Vue.js 允许将组件定义为一个工厂函数,动态地解析组件。Vue. 只在组件需要渲染时触发工厂函数, 并且把结果缓存起来,用于后面的再次渲染。

Vue.component('http://my-component22',function(resolve, reject){

window.setTimeout(function(){

resolve({

template: '

})

},2000)

});

var app22 = new Vue({

el: '#app22'

});

工厂函数接收一个resolve 回调,在收到从服务器下载的组件定义时调用。也可以调用reject( reason )指示加载失败。

这里setTimeout 只是为了演示异步,具体的下载逻辑可以自己决定,比如把组件配置写成一个对象配置,通过Ajax 来请求,然后调用resolve 传入配置选项。

总结

以上所述是给大家介绍的vue 组件高级用法实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Java与Python两大幸存者谁更胜一筹呢
下一篇:基于angular6.0实现的一个组件懒加载功能示例
相关文章

 发表评论

暂时没有评论,来抢沙发吧~