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 相关文章推荐
IE6 fixed的完美解决方案
Mar 31 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
php 分页原理详解
2009/08/21 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
Sea.JS知识总结
2016/05/05 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
小程序实现tab标签页
2020/11/16 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
求职面试个人自我评价
2014/02/28 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
小兵张嘎观后感
2015/06/03 职场文书
销售口号霸气押韵
2015/12/24 职场文书