浅谈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+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 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+DBM的同学录程序(4)
2006/10/09 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python爬虫之百度API调用方法
2017/06/11 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
Python模块的制作方法实例分析
2019/12/21 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
代理班主任的自我评价
2014/02/04 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
结婚保证书范文
2014/04/29 职场文书
优秀班组长事迹
2014/05/31 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
酒会开场白大全
2015/06/01 职场文书
实习感想范文
2015/08/10 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA