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 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
原生js实现简单轮播图
Oct 26 Javascript
JavaScript 数组去重详解
Sep 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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
javascript倒计时功能实现代码
2012/06/07 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python 文件管理实例详解
2015/11/10 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
python中的常量和变量代码详解
2018/07/25 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
基于python 凸包问题的解决
2020/04/16 Python
python实现坦克大战
2020/04/24 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
幼儿园保育员辞职信
2014/01/12 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
银行进社区活动总结
2014/07/07 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP