好资源导航 » 文章资讯 » vue 组件高级用法实例详解

vue 组件高级用法实例详解

2023-09-14 07:38:05 71

一、递归组件

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

示例如下：

Vue.component('my-component19',{ name:'my-component19',//其实当你利用Vue.component全局注册了一个组件，全局的ID会被自动设置为组件的name。 props:{ count:{ type:Number, default:1 } }, template:'

' }); varapp19=newVue({ el:'#app19' });

渲染结果为：

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

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

二、内联模板

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

示例如下：




在父组件中定义子组件的模板
{{msg}}

Vue.component('my-component20',{ data:function(){ return{ msg:'在子组件声明的数据' } } }); varapp20=newVue({ el:'#app20' });

三、动态组件

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

示例如下：



切换到A
切换到B
切换到C

varapp21=newVue({ el:'#app21', data:{ currentView:'comA' }, methods:{ changeView:function(data){ this.currentView='com'+data//动态地改变currentView的值就可以动态挂载组件了。 } }, components:{ comA:{ template:'

组件A

' }, comB:{ template:'

组件B

' }, comC:{ template:'

组件C

' } } });

四、异步组件

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

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

Vue.component('my-component22',function(resolve,reject){ window.setTimeout(function(){ resolve({ template:'

我是异步渲染的

' }) },2000) }); varapp22=newVue({ el:'#app22' });

工厂函数接收一个resolve回调，在收到从服务器下载的组件定义时调用。也可以调用reject(reason）指示加载失败。
这里setTimeout只是为了演示异步，具体的下载逻辑可以自己决定，比如把组件配置写成一个对象配置，通过Ajax来请求，然后调用resolve传入配置选项。

总结

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

返回顶部
514930285
czq8825@qq.com

vue 组件高级用法实例详解

在父组件中定义子组件的模板

热门推荐

随机推荐