说说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中输入验证中一个不错的效果
Aug 21 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
VueJS全面解析
Nov 10 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 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判断浏览器的类型和语言的函数代码
2013/02/28 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python实现全角半角转换的方法
2014/08/18 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
python async with和async for的使用
2019/06/20 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
C#面试题
2016/05/06 面试题
晨会主持词
2014/03/17 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
英文自荐信常用句子
2014/03/26 职场文书
六一节目主持词
2014/04/01 职场文书
中药学自荐信
2014/06/15 职场文书
委托书范本
2014/09/13 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
人口与计划生育责任书
2015/05/09 职场文书