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 相关文章推荐
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
基于javascript实现碰撞检测
Mar 12 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
php表单提交问题的解决方法
2011/04/12 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
JS高级笔记
2011/07/13 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
简单介绍Python中的round()方法
2015/05/15 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python 字符串换行的多种方式
2018/09/06 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Pycharm Git 设置方法
2020/09/15 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
总经理秘书工作职责
2013/12/26 职场文书
学校就业推荐信范文
2014/05/19 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
运动员获奖感言
2014/08/15 职场文书
无私奉献演讲稿
2014/09/04 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
销售开票员岗位职责
2015/04/15 职场文书
python requests模块的使用示例
2021/04/07 Python
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers