vue 组件高级用法实例详解


Posted in Javascript onApril 11, 2018

一、递归组件

组件在它的模板内可以递归地调用自己, 只要给组件设置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'
});

渲染结果为:

<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'
});

三、动态组件

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>'
  }
 }
});

 四、异步组件

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

好在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 传入配置选项。

总结

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

Javascript 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
javascript中Object使用详解
Jan 26 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 #Javascript
React如何避免重渲染
Apr 10 #Javascript
vue select组件的使用与禁用实现代码
Apr 10 #Javascript
vue 自定义 select内置组件
Apr 10 #Javascript
JavaScript如何对图片进行黑白化
Apr 10 #Javascript
axios 处理 302 状态码的解决方法
Apr 10 #Javascript
vue.js中npm安装教程图解
Apr 10 #Javascript
You might like
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
非常好的js代码
2006/06/27 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python 实现简单的电话本功能
2015/08/09 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
python环境下安装opencv库的方法
2020/03/05 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
代理班主任的自我评价
2014/02/04 职场文书
五一活动标语
2014/06/30 职场文书
先进个人事迹材料
2014/12/29 职场文书
法定授权委托证明书
2015/06/18 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
asyncio异步编程之Task对象详解
2022/03/13 Python