Vuejs函数式组件,你值得拥有(1)
函数式组件在React
社区很流行使用,那么在vue里面我们要怎么用呢
下面会涉及到的知识点: 高阶函数、状态、实例、vue组件
什么是函数式组件
我们可以把函数式组件想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML
对于函数式组件,可以这样定义:
- Stateless(无状态):组件自身是没有状态的
- Instanceless(无实例):组件自身没有实例,也就是没有this
由于函数式组件拥有的这两个特性,我们就可以把它用作高阶组件(High order components),所谓高阶,就是可以生成其它组件的组件。就像日本的高精度的母机。
下面示例的完整Demo
那创造一个函数式组件吧
functional: true
加上render function
,就是一个最简单的函数式组件啦,show your the code, 下面就创建一个名为FunctionButton.js
的函数式组件
export default {
name: 'functional-button',
functional: true,
render(createElement, context) {
return createElement('button', 'click me')
}
}
就像上文所讲的,函数式组件没有this,参数就是靠context
来传递的了,下面我们看下context
有哪些属性呢
Render context
props
children
slots
(a slots object)parent
listeners
injections
data
其中上面的data
包含了其他属性的引用,nibility。 在下面的范例中会有具体使用
现在创建一个App.vue
来引入上面的函数式组件
<template>
<FunctionalButton>
click me
</FunctionButton>
</template>
上面的click me
就是FunctionButton.js
的childern
属性了,我们可以把组件改造下,由App.vue
来定义组件的button按钮
export default {
name: 'funtional-button',
functional: true,
render(createElement, { children }) {
return createElement('button', children)
}
}
看,上面用了ES6参数的解构,用{children}
来代替context
事件定义
函数式组件没有实例,事件只能由父组件传递。下面我们在App.vue
上定义一个最简单的click
事件
<template>
<FunctionalButton @click="log">
Click me
</FunctionalButton>
</template>
对应的FunctionalButton.js
export default {
functional: true,
render(createElement, { props, listeners, children }) {
return createElement(
'button',
{
attrs: props,
on: {
click: listeners.click
}
},
children
);
}
};
对了,createElement
里事件属性就是on
了。具体可以看vue
的官方文档
简单的写法
尤大设计的Api还是很人性的,上面涉及到的props
、listeners
那么多要传递的,是不是很麻烦,所以尤大统一把这个属性集成在data
里了,我们可以再改写下
export default {
functional: true,
render(createElement, { data, children }) {
return createElement( 'button', data, children );
}
};
恩,是不是感觉世界清爽了不少
这就是一个完整的高阶组件了,下面小小的展示一下高阶的魅力。
createElement('button', data, ['hello', ...children])
恩,很简单的就DIY了一个自带hello
的button按钮
The end
上面就是关于函数式组件的基础定义和基本使用了,希望对你们的学习有帮助。
demo效果图:
Vuejs函数式组件,你值得拥有(1)的更多相关文章
- vuejs动态组件给子组件传递数据
vuejs动态组件给子组件传递数据 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component> ...
- 【vue】函数式组件
在 2.5.0 及以上版本中,如果你使用了单文件组件,那么基于模板的函数式组件可以这样声明: <template functional> <div class="cell& ...
- 渲染函数render和函数式组件
vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...
- react 中的无状态函数式组件
无状态函数式组件,顾名思义,无状态,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑. 其实无状态函数式组件也是 ...
- Vue函数式组件的应用
一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1. 以局部组件为例,将组件标记为 functional=ture; 因为 ...
- 如何对 React 函数式组件进行优化
文章首发个人博客 前言 目的 本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用.另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks ...
- Vue.js 源码分析(三十) 高级应用 函数式组件 详解
函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...
- React函数式组件使用Ref
目录: 简介 useRef forwardRef useImperativeHandle 回调Ref 简介 大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象,进而对子组件进 ...
- Vue 函数式组件 functional
函数式组件 无状态 无法实例化 内部没有任何生命周期处理函数 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件,无逻辑和状态修改) 在template标签里标明functional 只 ...
随机推荐
- dns服务器正向解析配置
DNS服务器的配置 一.安装软件 1.安装bind.bind-utils软件,起服务,设置开机启动. bind-utils软件用于提供nslookup功能,用于测试dns是否搭建成功,能够正常解析. ...
- 使用Eclipse Memory Analyzer进行内存泄漏分析
一.准备工作 1)工具下载: http://www.eclipse.org/mat/downloads.php 可以选择eclipse插件的方式安装 http://download.eclipse.o ...
- linux系统编程之信号(六)
今天继续学习信号相关的知识,主要还是学习sigqueue另外信号发送函数,并配合上节学习的sigaction的用法,进入正题: sigqueue函数: sigval联合体: 实际上sigval参数是用 ...
- 0028ssm环境搭建(springmvc+spring+mybatis)
spring整合springmvc和mybatis主要分为如下几个步骤: 1.spring环境搭建 2.springmvc环境搭建 3.spring整合springmvc 4.spring整合myba ...
- 浏览器缓存控制 以及 在url框中回车、F5 和 Ctrl + F5的区别
第一部分: 浏览器缓存如何控制? 做网站,不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存 说明:浏览器向服务器请求资源m.pn ...
- 瀑布流(基于Django)
# 后端 from django.shortcuts import render, HttpResponse from django.http import JsonResponse from app ...
- Hibernate框架的查询方式
技术分析之Hibernate框架的查询方式 1. 唯一标识OID的检索方式 * session.get(对象.class,OID) 2. 对象的导航的方式 ...
- python的种类有哪些?
CPython 当我们从Python官方网站下载并安装好Python 3.6后,我们就直接获得了一个官方版本的解释器:CPython.这个解释器是用C语言开发的,所以叫CPython.在命令行下运行p ...
- LightOJ - 1246 - Colorful Board(DP)
链接: https://vjudge.net/problem/LightOJ-1246 题意: You are given a rectangular board. You are asked to ...
- Apache Solr Velocity模板远程代码执行
更多内容,欢迎关注微信公众号:信Yang安全,期待与您相遇. 这里用的docker环境 很简单的 在这里不再介绍 本地搭建好环境然后访问8983端口 网页如下: 查下节点名称 同样名字可以访问http ...