浅谈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 相关文章推荐
Javascript 事件流和事件绑定
Jul 16 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
微信小程序实现展示评分结果功能
Feb 15 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php中使用GD库做验证码
2016/03/31 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
JavaScript简介
2015/02/15 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
python快速查找算法应用实例
2014/09/26 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
Python对excel的基本操作方法
2021/02/18 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
中学生运动会入场词
2014/02/12 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书