您现在的位置是:首页 > 文章详情

vue 组件高级用法实例详解

日期:2018-11-26点击:336

一、递归组件

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

示例如下:

 <div id="app19"> <my-component19 :count="1"></my-component19> </div> Vue.component('my-component19',{ name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件,全局的ID会被自动设置为组件的name。 props: { count: { type: Number, default: 1 } }, template: '<div><my-component19 :count="count+1" v-if="count<3"></my-component19></div>' }); var app19 = new Vue({ el: '#app19' }); //前端全栈学习交流圈:866109386 //面向1-3经验年前端开发人员 //帮助突破技术瓶颈,提升思维能力 

渲染结果为:

<div id="app19"> <div> <div> <div><!----></div> </div> </div> </div> 

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

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

二、内联模板

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

示例如下:

<div id="app20"> <my-component20 inline-template> <div> <h3>在父组件中定义子组件的模板</h3> <p>{{msg}}</p> </div> </my-component20> </div> Vue.component('my-component20',{ data: function(){ return { msg: '在子组件声明的数据' } } }); var app20 = new Vue({ el: '#app20' }); //前端全栈学习交流圈:866109386 //面向1-3经验年前端开发人员 //帮助突破技术瓶颈,提升思维能力 

三、动态组件

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

示例如下:

<div id="app21"> <component :is="currentView"></component> <button @click="changeView('A')">切换到A</button> <button @click="changeView('B')">切换到B</button> <button @click="changeView('C')">切换到C</button> </div> var app21 = new Vue({ el: '#app21', data: { currentView: 'comA' }, methods: { changeView: function(data){ this.currentView = 'com'+ data //动态地改变currentView的值就可以动态挂载组件了。 } }, components: { comA: { template: '<div>组件A</div>' }, comB: { template: '<div>组件B</div>' }, comC: { template: '<div>组件C</div>' } } }); //前端全栈学习交流圈:866109386 //面向1-3经验年前端开发人员 //帮助突破技术瓶颈,提升思维能力 

四、异步组件

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

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

<div id="app22"> <my-component22></my-component22> </div> Vue.component('my-component22',function(resolve, reject){ window.setTimeout(function(){ resolve({ template: '<div>我是异步渲染的</div>' }) },2000) }); var app22 = new Vue({ el: '#app22' }); 

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

原文链接:https://my.oschina.net/u/3970421/blog/2961278
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章