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 表格的增行删行实现思路
Mar 21 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
JS监听组合按键思路及实现过程
Apr 17 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 MySQL与分页效率
2008/06/04 PHP
php 购物车的例子
2009/05/04 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
jQuery截取指定长度字符串代码
2014/08/21 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
python中实现字符串翻转的方法
2018/07/11 Python
Python unittest单元测试框架总结
2018/09/08 Python
Python list与NumPy array 区分详解
2019/11/06 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
十一酒店活动方案
2014/02/20 职场文书
工程项目建议书范文
2014/03/12 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
初三毕业评语
2014/12/26 职场文书
银行自荐信范文
2015/03/25 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
python实现Thrift服务端的方法
2021/04/20 Python
Golang 实现超大文件读取的两种方法
2021/04/27 Golang