符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章主要为大家展示了“vue中组件有什么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中组件有什么用”这篇文章吧。
创新互联是一家专注于成都网站制作、成都网站建设与策划设计,淮北网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:淮北等地区。淮北做网站价格咨询:18980820575
一、递归组件
组件在它的模板内可以递归地调用自己, 只要给组件设置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 特性,组件就会把它的内容当作模板,而不是把它当内容分发,这让模板更灵活。
示例如下:
Vue.component('my-component20',{ data: function(){ return { msg: '在子组件声明的数据' } } }); var app20 = new Vue({ el: '#app20' });在父组件中定义子组件的模板
{{msg}}
三、动态组件
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: ' 组件A' }, comB: { template: '组件B' }, comC: { template: '组件C' } } });
四、异步组件
当你的工程足够大, 使用的组件足够多时, 是时候考虑下性能问题了, 因为一开始把所有的组件都加载是没必要的一笔开销。
好在Vue.js 允许将组件定义为一个工厂函数,动态地解析组件。Vue. 只在组件需要渲染时触发工厂函数, 并且把结果缓存起来,用于后面的再次渲染。
Vue.component('my-component22',function(resolve, reject){ window.setTimeout(function(){ resolve({ template: ' 我是异步渲染的' }) },2000) }); var app22 = new Vue({ el: '#app22' });
工厂函数接收一个resolve 回调,在收到从服务器下载的组件定义时调用。也可以调用reject( reason )指示加载失败。
这里setTimeout 只是为了演示异步,具体的下载逻辑可以自己决定,比如把组件配置写成一个对象配置,通过Ajax 来请求,然后调用resolve 传入配置选项。
以上是“vue中组件有什么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!