Vue.js组件高级特性实例详解


Posted in Javascript onDecember 24, 2018

本文实例讲述了Vue.js组件高级特性。分享给大家供大家参考,具体如下:

1 递归

为组件设置 name 属性,这个组件就可以在自身的模板内递归调用自己。

html:

<div id="app">
  <deniro-component :count="1"></deniro-component>
</div>

js:

Vue.component('deniro-component',{
  name:'deniro-component',
  props:{
    count:{
      type:Number,
      default:1
    }
  },
  template:'\
  <div class="child">\
  <p>{{count}} 微信大变样!看了这些新功能后,网友淡定不住了</p>\
    <deniro-component\
      :count="count + 1"\
      v-if="count < 3"></deniro-component>\
  </div>\
  '
});
var app = new Vue({
  el: '#app',
  data: {}
});

效果:

Vue.js组件高级特性实例详解

渲染结果:

Vue.js组件高级特性实例详解

可以利用组件的可递归特性,来实现一些具有不确定层级的组件,比如级联选择器和树型组件。

2 内联模板

一般情况下,组件的模板都是在 template 中定义的。我们也可以在组件标签中加上 inline-template 属性,这样组件就会把它的内容作为实际的模板内容。

内联模板可以接收父、子组件中声明的数据,所以更加灵活。

html:

<div id="app2">
  <deniro-component2 inline-template>
    <div>
      <h2>父组件中定义子组件模板</h2>
      <p>{{content1}}</p>
      <p>{{content2}}</p>
    </div>
  </deniro-component2>
</div>

js:

Vue.component('deniro-component2',{
  data:function () {
    return {
      content1:'双屏手机一碰就碎?实测结果意外(来源于子组件)'
    }
  }
});
var app2 = new Vue({
  el: '#app2',
  data: {
    content2:'AI正在改变所有行业 咖啡也将被消灭(来源于父组件)'
  }
});

渲染结果:

<div id="app2">
 <div>
  <h2>父组件中定义子组件模板</h2>
  <p>双屏手机一碰就碎?实测结果意外(来源于子组件)</p>
  <p>AI正在改变所有行业 咖啡也将被消灭(来源于父组件)</p>
 </div>
</div>

如果父子组件定义的数据同名,那么优先使用子组件中的数据。

因为作用域较难理解,所以除非必要,否则不建议使用。

3 动态加载

我们可以使用 is 来实现动态挂载组件。

html:

<div id="app3">
  <deniro-component3 :is="currentView"></deniro-component3>
  <button @click="change('A')">切换到 A 组件</button>
  <button @click="change('B')">切换到 B 组件</button>
  <button @click="change('C')">切换到 C 组件</button>
</div>

js:

var app3 = new Vue({
  el: '#app3',
  components: {
    componentA: {
      template: '<div>组件 A</div>'
    },
    componentB: {
      template: '<div>组件 B</div>'
    },
    componentC: {
      template: '<div>组件 C</div>'
    }
  },
  data: {
    currentView: 'componentA'
  },
  methods: {
    change: function (component) {
      this.currentView = 'component' + component;
    }
  }
});

效果:

Vue.js组件高级特性实例详解

data 中的 is 变量也可以直接绑定组件对象。

html:

<div id="app4">
  <deniro-component4 :is="currentView"></deniro-component4>
</div>

js:

var news={
  template:'<p>无人机送快递 渐行渐近</p>'
}
var app4 = new Vue({
  el: '#app4',
  data: {
    currentView: news
  }
});

渲染结果:

<div id="app4">
 <p>无人机送快递 渐行渐近</p>
</div>

4 异步加载

当工程变得越来越大时,就需要考虑性能喽。我们可以把组件定义成一个工厂函数,实现组件动态解析。Vue.js 会把本次渲染后的结果缓存起来,从而提高性能。

html:

<div id="app5">
  <deniro-component5></deniro-component5>
</div>

js:

Vue.component('deniro-component5', function (resolve,reject) {
  window.setTimeout(function () {
    resolve({
      template:'<div>全球首个5G电话拨通</div>'
    });
  },1000);
});
var app5 = new Vue({
  el: '#app5'
});

效果:

Vue.js组件高级特性实例详解

这里使用 setTimeout 来模拟异步下载,下载成功后会调用 resolve 方法。

一般情况下,会把组件的配置定义为对象配置,然后通过 Ajax 请求组件配置信息,最后通过 resolve 传入这些配置。

完整实例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue.js组件高级特性</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
<div id="app">
  <deniro-component :count="1"></deniro-component>
</div>
<div id="app2">
  <deniro-component2 inline-template>
    <div>
      <h2>父组件中定义子组件模板</h2>
      <p>{{content1}}</p>
      <p>{{content2}}</p>
    </div>
  </deniro-component2>
</div>
<div id="app3">
  <deniro-component3 :is="currentView"></deniro-component3>
  <button @click="change('A')">切换到 A 组件</button>
  <button @click="change('B')">切换到 B 组件</button>
  <button @click="change('C')">切换到 C 组件</button>
</div>
<div id="app4">
  <deniro-component4 :is="currentView"></deniro-component4>
</div>
<div id="app5">
  <deniro-component5></deniro-component5>
</div>
<script>
Vue.component('deniro-component5', function (resolve,reject) {
    window.setTimeout(function () {
      resolve({
        template:'<div>全球首个5G电话拨通</div>'
      });
    },1000);
  });
  var app5 = new Vue({
    el: '#app5'
  });
  var news={
    template:'<p>无人机送快递 渐行渐近</p>'
  }
  var app4 = new Vue({
    el: '#app4',
    data: {
      currentView: news
    }
  });
  var app3 = new Vue({
    el: '#app3',
    components: {
      componentA: {
        template: '<div>组件 A</div>'
      },
      componentB: {
        template: '<div>组件 B</div>'
      },
      componentC: {
        template: '<div>组件 C</div>'
      }
    },
    data: {
      currentView: 'componentA'
    },
    methods: {
      change: function (component) {
        this.currentView = 'component' + component;
      }
    }
  });
  Vue.component('deniro-component2', {
    data: function () {
      return {
        content1: '双屏手机一碰就碎?实测结果意外(来源于子组件)'
      }
    }
  });
  var app2 = new Vue({
    el: '#app2',
    data: {
      content2: 'AI正在改变所有行业 咖啡也将被消灭(来源于父组件)'
    }
  });
  Vue.component('deniro-component', {
    name: 'deniro-component',
    props: {
      count: {
        type: Number,
        default: 1
      }
    },
    template: '\
    <div class="child">\
    <p>{{count}} 微信大变样!看了这些新功能后,网友淡定不住了</p>\
      <deniro-component\
        :count="count + 1"\
        v-if="count < 3"></deniro-component>\
    </div>\
    '
  });
  var app = new Vue({
    el: '#app',
    data: {}
  });
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun 测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
js文字横向滚动特效
Nov 11 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 #Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 #jQuery
原生js实现Flappy Bird小游戏
Dec 24 #Javascript
node错误处理与日志记录的实现
Dec 24 #Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 #Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 #Javascript
微信小程序获取用户openid的实现
Dec 24 #Javascript
You might like
PHP的Json中文处理解决方案
2016/09/29 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
python动态网页批量爬取
2016/02/14 Python
Python 基础知识之字符串处理
2017/01/06 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
Python list和str互转的实现示例
2020/11/16 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
大学生自我评价怎样写好
2013/10/23 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
商场消防安全责任书
2014/07/29 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
python源码剖析之PyObject详解
2021/05/18 Python
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python