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进行跨域请求
Jan 25 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
JS全角与半角转化实例(分享)
Jul 04 Javascript
详解node.js 事件循环
Jul 22 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 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提取中文首字母
2008/04/09 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
linux 下实现python多版本安装实践
2014/11/18 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
python将音频进行变速的操作方法
2020/04/08 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
餐饮采购员岗位职责
2014/03/15 职场文书
有创意的广告词
2014/03/18 职场文书
法律系毕业生求职信
2014/05/28 职场文书
环境保护建议书
2014/08/26 职场文书
大二学生自我检讨书
2014/10/23 职场文书
食品卫生管理制度
2015/08/06 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
oracle索引总结
2021/09/25 Oracle
golang中的struct操作
2021/11/11 Golang
MySQL分区以及建索引的方法总结
2022/04/13 MySQL