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 相关文章推荐
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
php中filter_input函数用法分析
2014/11/15 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
canvas实现钟表效果
2017/02/13 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python实现的最近最少使用算法
2015/07/10 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
通信生自我鉴定
2014/01/18 职场文书
运动会入场解说词300字
2014/01/25 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
庆七一活动总结
2014/08/27 职场文书
文化大革命观后感
2015/06/17 职场文书
教师远程培训心得体会
2016/01/09 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
mysql事务对效率的影响分析总结
2021/10/24 MySQL