在 2.5.0 及以上版本中,如果你使用了单文件组件,那么基于模板的函数式组件可以这样声明:

<template functional>
<div class="cell">
<div v-if="props.value" class="on"></div>
<section v-else class="off"></section>
</div>
</template> <script>
export default {
props: ['value']
}
</script>

我们标记组件为 functional,这意味它是无状态 (没有响应式数据),无实例 (没有 this 上下文)。

提示:函数式组件比普通组件性能更好,缺点是定义的数据没有响应式。

【vue】函数式组件的更多相关文章

  1. Vue 函数式组件 functional

    函数式组件 无状态 无法实例化 内部没有任何生命周期处理函数 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件,无逻辑和状态修改) 在template标签里标明functional 只 ...

  2. Vue函数式组件的应用

    一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1. 以局部组件为例,将组件标记为 functional=ture; 因为 ...

  3. vue函数式组件详解

    本篇将详细介绍vue组件化之函数式组件,会用到以下api: Vue.component().Vue.extend().$createElement.patch(). 从事vue开发的小伙伴,平时组件化 ...

  4. Vue.js 源码分析(三十) 高级应用 函数式组件 详解

    函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...

  5. 渲染函数render和函数式组件

    vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...

  6. Vuejs函数式组件,你值得拥有(1)

    函数式组件在React社区很流行使用,那么在vue里面我们要怎么用呢 下面会涉及到的知识点: 高阶函数.状态.实例.vue组件 什么是函数式组件 我们可以把函数式组件想像成组件里的一个函数,入参是渲染 ...

  7. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  8. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  9. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

随机推荐

  1. Kafka Tuning Recommendations

    Kafka Brokers per Server Recommend 1 Kafka broker per server- Kafka not only disk-intensive but can ...

  2. Apache Jakarta Commons 工具集简介

    Apache Jakarta Commons 工具集简介[转] Apache Commons包含了很多开源的工具,用于解决平时编程经常会遇到的问题,减少重复劳动.我选了一些比较常用的项目做简单介绍.文 ...

  3. Linux根据端口号查看进程PID

    1.命令lsof,以查找占用端口80为例,用法如下: [root@localhost nginx]# lsof -i:80 以上为没有进程占用80端口, [root@localhost sbin]# ...

  4. 教你如何在Drcom下使用路由器上校园网(以广东工业大学、极路由1S HC5661A为例)

    免责声明: 在根据本教程进行实际操作时,如因您操作失误导致出现的一切意外,包括但不限于路由器变砖.故障.数据丢失等情况,概不负责: 该技术仅供学习交流,请勿将此技术应用于任何商业行为,所产生的法律责任 ...

  5. Python--day05(数字、字符串、列表)

    1.数字类型 1.  整型  int   long(py2) 2.  小数 float 3.  布尔 bool 4.  复数 complex 2.  字符串类型 只能存一个值,是有序的不可变类型 2. ...

  6. JS中各种宽度距离小结

    js中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词解释 screen:屏幕.这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该 ...

  7. CentOS6.5-安装yum方法

    1.卸载原有系统中的yumrpm –qa | grep yum | xargs rpm -e --nodeps (xargs 把rpm –qa | grep yum传来的每一行信息 都用xargs后面 ...

  8. http请求方式和传递数据类型

    HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则. GET,通过请求URI得到资源 POST,用于添加新的内容 PUT用于修改某个内容 DELETE ...

  9. 图解从 URL 到网页通信原理

    前言 一.文本对话--从请求到响应 二.TCP/IP 协议族介绍 三.基于TCP/IP通信过程 四.TCP建立连接及断开(重点补充) 小结 前言 互联网的原始目的,就是为了传输文本(文本对话).那我们 ...

  10. Plugin Kotlin was not installed: Cannot download

    到 https://plugins.jetbrains.com/plugin/6954-kotlin下载对应版本(右键复制链接地址,用迅雷下载),放到androidstudio安装目录下的plugin ...