说说Vue.js中的functional函数化组件的使用


Posted in Javascript onFebruary 12, 2019

Vue.js 组件提供了一个 functional  开关,设置为 true 后,就可以让组件变为无状态、无实例的函数化组件。因为只是函数,所以渲染的开销相对来说,较小。

函数化的组件中的 Render 函数,提供了第二个参数 context 作为上下文,data、props、slots、children 以及 parent 都可以通过 context 来访问。

1 示例

这里,我们用  functional 函数化组件来实现一个智能组件。

html:

<div id="app">
  <smart-component :data="data"></smart-component>
  <button @click="change('img')">图片组件</button>
  <button @click="change('video')">视频组件</button>
  <button @click="change('text')">文本组件</button>
</div>

js:

//图片组件设置
var imgOptions = {
  props: ['data'],
  render: function (createElement) {
    return createElement('div', [
      createElement('p', '图片组件'),
      createElement('img', {
        attrs: {
          src: this.data.url,
          height: 300,
          weight: 400

        }
      })
    ]);
  }
};

//视频组件设置
var videoOptions = {
  props: ['data'],
  render: function (createElement) {
    return createElement('div', [
      createElement('p', '视频组件'),
      createElement('video', {
        attrs: {
          src: this.data.url,
          controls: 'controls',
          autoplay: 'autoplay'
        }
      })
    ]);
  }
};

//文本组件设置
var textOptions = {
  props: ['data'],
  render: function (createElement) {
    return createElement('div', [
      createElement('p', '文本组件'),
      createElement('p', this.data.content)
    ]);
  }
};

Vue.component('smart-component', {
  //设置为函数化组件
  functional: true,
  render: function (createElement, context) {
    function get() {
      var data = context.props.data;

      console.log("smart-component/type:" + data.type);
      //判断是哪一种类型的组件
      switch (data.type) {
        case 'img':
          return imgOptions;
        case 'video':
          return videoOptions;
        case 'text':
          return textOptions;
        default:
          console.log("data 类型不合法:" + data.type);
      }
    }

    return createElement(
      get(),
      {
        props: {
          data: context.props.data
        }
      },
      context.children
    )
  },
  props: {
    data: {
      type: Object,
      required: true
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    data: {}
  },
  methods: {
    change: function (type) {
      console.log("输入类型:" + type);
      switch (type) {
        case 'img':
          this.data = {
            type: 'img',
            url: 'http://pic-bucket.ws.126.net/photo/0001/2019-02-07/E7D8PON900AO0001NOS.jpg'
          }
          break;
        case 'video':
          this.data = {
            type: 'video',
            url: 'http://wxapp.cp31.ott.cibntv.net/6773887A7F94A71DF718E212C/03002002005B836E73A0C5708529E09C1952A1-1FCF-4289-875D-AEE23D77530D.mp4?ccode=0517&duration=393&expire=18000&psid=bbd36054f9dd2b21efc4121e320f05a0&ups_client_netip=65600b48&ups_ts=1549519607&ups_userid=21780671&utid=eWrCEmi2cFsCAWoLI41wnWhW&vid=XMzc5OTM0OTAyMA&vkey=A1b479ba34ca90bcc61e3d6c3b2da5a8e&iv=1&sp='
          }
          break;
        case 'text':
          this.data = {
            type: 'text',
            content: '《流浪地球》中的科学:太阳何时吞并地球?科学家已经给出时间表'
          }
          break;
        default:
          console.log("data 类型不合法:" + type);
      }

    }
  },
  created: function () {
    //默认为图片组件
    this.change('img');
  }

});

效果:

说说Vue.js中的functional函数化组件的使用

  • 首先定义了图片组件设置对象、视频组件设置对象以及文本组件设置对象,它们都以 data 作为入参。
  • 函数化组件 smart-component,也以  data 作为入参。内部根据 get() 函数来判断需要渲染的组件类型。
  • 函数化组件 smart-component 的 render 函数,以 get() 作为第一个参数;以 smart-component 所传入的 data,作为第二个参数:
return createElement(
  get(),
  {
    props: {
      data: context.props.data
    }
  },
  context.children
)

根实例 app 的 change 方法,根据输入的类型,来切换不同的组件所需要的数据。

2 应用场景

函数化组件不常用,它应该应用于以下场景:

  • 需要通过编程实现在多种组件中选择一种。
  • children、props 或者 data 在传递给子组件之前,处理它们。

本文示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
js实现百度搜索提示框
Feb 05 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
Javascript中的解构赋值语法详解
Apr 02 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
详解Vue用cmd创建项目
Feb 12 #Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 #Javascript
微信小程序实现的自定义分享功能示例
Feb 12 #Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 #Javascript
实例分析编写vue组件方法
Feb 12 #Javascript
详解vue引入子组件方法
Feb 12 #Javascript
vue组件之间数据传递的方法实例分析
Feb 12 #Javascript
You might like
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python面向对象特殊成员
2017/04/24 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
python根据文本生成词云图代码实例
2019/11/15 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python自动化办公操作PPT的实现
2021/02/05 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
环保倡议书500字
2014/05/15 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
文明生主要事迹
2014/05/25 职场文书
材料化学专业求职信
2014/07/15 职场文书
党支部三会一课计划
2014/09/24 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS