浅谈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 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
javascript插入样式实现代码
Feb 22 Javascript
node.js中的console用法总结
Dec 15 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
微信小程序实现签到功能
Oct 31 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
element 动态合并表格的步骤
Dec 31 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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP类型约束用法示例
2016/09/28 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
详解参数传递四种形式
2015/07/21 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
浅谈js中的bind
2019/03/18 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
运动会广播稿30字
2014/01/21 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
求职信结尾怎么写
2014/05/26 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
全民创业工作总结
2015/08/13 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP