浅谈Vue 函数式组件的使用技巧


Posted in Javascript onJune 16, 2020

什么是函数式组件

没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法,它只是一个接受一些 prop 的函数。简单来说是 一个无状态和无实例的组件

基本写法:

Vue.component('my-component', {
 functional: true,
 // Props 是可选的
 props: {
  // ...
 },
 // 为了弥补缺少的实例
 // 提供第二个参数作为上下文
 render: function(createElement, context) {
  // ...
 }
})

.vue 单文件组件写法

<template functional>
 ...
</template>

因为函数式组件没有 this,参数就是靠 context 来传递的了,有如下字段的对象:

  • props:提供所有 prop 的对象
  • children:VNode 子节点的数组
  • slots:一个函数,返回了包含所有插槽的对象
  • scopedSlots:(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
  • data:传递给组件的整个数据对象,作为 createElement 的第二个参数传入组件
  • parent:对父组件的引用
  • listeners:(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
  • injections:(2.3.0+) 如果使用了 inject 选项,则该对象包含了应当被注入的 property。

使用技巧

以下总结、都是基于使用 <template> 标签开发函数式组件中遇到的问题

attr 与 listener 使用

平时我们在开发组件时,传递 prop 属性以及事件等操作,都会使用v-bind="$attrs"和 v-on="$listeners"。而在函数式组件的写法有所不同,attrs属性集成在 data中。

<template functional>
 <div v-bind="data.attrs" v-on="listeners">
  <h1>{{ props.title }}</h1>
 </div>
</template>

class 与 style 绑定

在引入函数式组件、直接绑定外层的class类名和style样式是无效的。data.class 表示动态绑定class, data.staticClass 则表示绑定静态class, data.staticClass 则是绑定内联样式
TitleView.vue

<template functional>
 <div :class="[data.class, data.staticClass]" :style="data.staticStyle">
  <h1>{{ props.title }}</h1>
 </div>
</template>

Test.vue

<template>
 <title-view
  :class="{title-active: isActive}"
  style="{ color: red }"
  title="Hello Do"
 />
</template>

component 组件引入

函数式组件引入其他组件方式如下,具体参考:github.com/vuejs/vue/i…

<template functional>
 <div class="tv-button-cell">
  <component :is="injections.components.TvButton" type="info" />
  {{ props.title }}
  </component>
 </div>
</template>

<script>
import TvButton from '../TvButton'

export default {
 inject: {
  components: {
   default: {
    TvButton
   }
  }
 }
}
</script>

$options 计算属性

有时候需要修改prop数据源, 使用 Vue 提供的 $options 属性,可以访问这个特殊的方法。

<template functional>
 <div v-bind="data.attrs" v-on="listeners">
  <h1>{{ $options.upadteName(props.title) }}</h1>
 </div>
</template>

<script>
 export default {
  updateName(val) {
   return 'hello' + val
  }
 }
</script>

总结

虽然速度和性能方面是函数式组件的优势、但不等于就可以滥用,所以还需要根据实际情况选择和权衡。比如在一些展示组件。例如, buttons, tags, cards,或者页面是静态文本,就很适合使用函数式组件。

到此这篇关于浅谈Vue 函数式组件的使用技巧的文章就介绍到这了,更多相关Vue 函数式组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
原生JS实现天气预报
Jun 16 #Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 #Javascript
原生JS实现无缝轮播图片
Jun 24 #Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 #Javascript
js+css实现全屏侧边栏
Jun 16 #Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 #Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 #Javascript
You might like
PHP的历史和优缺点
2006/10/09 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
Pycharm更换python解释器的方法
2018/10/29 Python
Python检查ping终端的方法
2019/01/26 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
python获取Pandas列名的几种方法
2019/08/07 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
如何使用python传入不确定个数参数
2020/02/18 Python
python如何删除文件、目录
2020/06/23 Python
python 实现波浪滤镜特效
2020/12/02 Python
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
中餐厅主管的职责范文
2014/02/04 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
绵山导游词
2015/02/05 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers