说说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 相关文章推荐
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
微信小程序实现点击图片放大预览
Oct 21 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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
2009/06/29 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
Python中优化NumPy包使用性能的教程
2015/04/23 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python中的zipfile模块使用详解
2015/06/25 Python
Python基于select实现的socket服务器
2016/04/13 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
python实现超市扫码仪计费
2018/05/30 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
python中什么是面向对象
2020/06/11 Python
Python装饰器结合递归原理解析
2020/07/02 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
公司管理制度范本
2015/08/03 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python