Vue函数式组件的应用实例详解


Posted in Javascript onAugust 30, 2019

一、函数式组件和普通组件的区别

  • 渲染快
  • 没有实例,意味着没有(this)
  • 没有生命周期(没有响应式数据)

二、组件函数的使用

1.以局部组件为例,将组件标记为functional=ture;

因为函数式没有实例,因此组件需要的一切都是通过context参数传递,它是一个包括如下字段的对象:

  • props:提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数,返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。data:传递给组件的整个数据对象,作为createElement的第二个参数传入组件parent:对父组件的引用listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是data.on的一个别名。injections: (2.3.0+) 如果使用了inject选项,则该对象包含了应当被注入的属性。

在添加 functional: true 之后,需要更新我们的锚点标题组件的渲染函数,为其增加 context参数,并将 this.$slots.default 更新为 context.children,然后将 this.level 更新为 context.props.level。

因为函数式组件只是函数,所以渲染开销也低很多。

在作为包装组件时它们也同样非常有用。比如,当你需要做这些时:

  • 程序化地在多个组件中选择一个来代为渲染;
  • 在将 children、props、data 传递给子组件之前操作它们。
data() {
    return {
      changer:1
    }
  },
components: {
    MyCmp:{
      functional:true,  //必要的设置
      render: function (createElement, context) {
        function getcomp(cmp){
          console.info(this); //输出为undefined,证明没有实例
          if(cmp==1){
            return comp1; 
          }else{
            return comp2
          }
        }
        return createElement(getcomp(context.props.changer),
        {
          props:{
            cmpData:context.props.data //为子组件传递数据
          }
        }
        );
      },

 2. 定义要渲染的组件

var comp1={
  props:['cmpData'],
  render:function(createElement,context){
    return createElement('el-input',{
      props:{
        type:this.cmpData
      }
    });
  },
  mounted() {
    console.log(this) //这个组件为正常组件
  },
}
var comp2={
  props:['cmpData'],
  render:function(createElement,context){
    return createElement('el-button',{
      props:{
        type:this.cmpData
      }
    });
  },
  mounted() {
    console.log(this) //正常组件
  },
}

三、在父组件中使用

<template>
  <div>
    <el-input v-model="changer" placeholder="子组件"></el-input>
    <my-cmp :changer="changer"></my-cmp>
  </div>
</template>
<script>

四、理解渲染函数的参数

接下来说一下createElement 接受的参数:

第一个参数:可以是  {String | Object | Function}

不管是那种类型,最终返回到都是需要渲染的普通DOM标签,

第二个参数:是一个对象,这个参数是可选的,定义了需要渲染组件的参数,相对于普通HTML标签的属性是一样的。

还可以自定义指令的,Vue特有的东西,只是抽象一些,没有直接用Vue.directive()用起来直观。

第三个参数:子级虚拟节点,如果你这个节点只是单节点,没有嵌套节点,这个参数可以忽略。如果有的你就要使用一个数据数组的值位cerateElement()返回的虚拟节点。套路都是一样的。

// @returns {VNode}
createElement(
 // {String | Object | Function}
 // 一个 HTML 标签名、组件选项对象,或者
 // resolve 了上述任何一种的一个 async 函数。必填项。
 'div',
 // {Object}
 // 一个与模板中属性对应的数据对象。可选。
 {
  // 与 `v-bind:class` 的 API 相同,
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同,
  // 接受一个字符串、对象,或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 属性内,
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件,用于监听原生事件,而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
 },
 // 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
 // 赋值,因为 Vue 已经自动为你进行了同步。
 directives: [
  {
   name: 'my-custom-directive',
   value: '2',
   expression: '1 + 1',
   arg: 'foo',
   modifiers: {
    bar: true
   }
  }
 ],
 // 作用域插槽的格式为
 // { name: props => VNode | Array<VNode> }
 scopedSlots: {
  default: props => createElement('span', props.text)
 },
 // 如果组件是其它组件的子组件,需为插槽指定名称
 slot: 'name-of-slot',
 // 其它特殊顶层属性
 key: 'myKey',
 ref: 'myRef',
 // 如果你在渲染函数中给多个元素都应用了相同的 ref 名,
 // 那么 `$refs.myRef` 会变成一个数组。
 refInFor: true  
 },
 // {String | Array}
 // 子级虚拟节点 (VNodes),由 `createElement()` 构建而成,
 // 也可以使用字符串来生成“文本虚拟节点”。可选。
 [
  '先写一些文字',
  createElement('h1', '一则头条'),
  createElement(MyComponent, {
   props: {
    someProp: 'foobar'
   }
  })
 ]
)

总结

以上所述是小编给大家介绍的Vue函数式组件的应用实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
Javascript中With语句用法实例
May 14 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
JS中的多态实例详解
Oct 15 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 #Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 #Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 #Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 #Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 #Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 #Javascript
java实现单链表增删改查的实例代码详解
Aug 30 #Javascript
You might like
PHP教程 基本语法
2009/10/23 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
js实现密码强度检验
2017/01/15 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
python django 增删改查操作 数据库Mysql
2017/07/27 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
python集合的新增元素方法整理
2020/12/07 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
《忆江南》教学反思
2014/04/07 职场文书
敬老模范事迹
2014/05/21 职场文书
火锅店的活动方案
2014/08/15 职场文书
室内趣味活动方案
2014/08/24 职场文书
关键在于落实心得体会
2014/09/03 职场文书
施工安全员岗位职责
2015/04/11 职场文书
部门2015年度工作总结
2015/04/29 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
心理学培训心得体会
2016/01/22 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书