【vue】函数式组件
在 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】函数式组件的更多相关文章
- Vue 函数式组件 functional
函数式组件 无状态 无法实例化 内部没有任何生命周期处理函数 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件,无逻辑和状态修改) 在template标签里标明functional 只 ...
- Vue函数式组件的应用
一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1. 以局部组件为例,将组件标记为 functional=ture; 因为 ...
- vue函数式组件详解
本篇将详细介绍vue组件化之函数式组件,会用到以下api: Vue.component().Vue.extend().$createElement.patch(). 从事vue开发的小伙伴,平时组件化 ...
- Vue.js 源码分析(三十) 高级应用 函数式组件 详解
函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...
- 渲染函数render和函数式组件
vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...
- Vuejs函数式组件,你值得拥有(1)
函数式组件在React社区很流行使用,那么在vue里面我们要怎么用呢 下面会涉及到的知识点: 高阶函数.状态.实例.vue组件 什么是函数式组件 我们可以把函数式组件想像成组件里的一个函数,入参是渲染 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
随机推荐
- UOJ 275. 【清华集训2016】组合数问题
UOJ 275. [清华集训2016]组合数问题 组合数 $C_n^m $表示的是从 \(n\) 个物品中选出 \(m\) 个物品的方案数.举个例子,从$ (1,2,3)(1,2,3)$ 三个物品中选 ...
- dicom错误解决
https://github.com/pydicom/pydicom/issues/331 sudo apt-get install python-gdcm
- Luogu4655 [CEOI2017]Building Bridges
Luogu4655 [CEOI2017]Building Bridges 有 \(n\) 根柱子依次排列,每根柱子都有一个高度.第 \(i\) 根柱子的高度为 \(h_i\) . 现在想要建造若干座桥 ...
- soamanager发布的Webservice服务,调用时出现http500报错
最近再给薪酬那边发布ws服务时出现了报错,调用方反馈了errorCode:BEA-380002.在使用XMLspy工具去调用这个WSDL时候,则反馈http500的错误消息.如下图: 遇到这种问题我通 ...
- 踩坑之mongodb配置文件修改
一.说明 本文档是在mongodb为3.4下编写的,仅作为参考 配置mongodb有两种方式,一种是通过mongod和mongos两个命令:另外一种方式就是配置文件的方式.因为更容易去管理,所以后者更 ...
- Linux centos ssh
创建m01.backup.nfs.web01.web02 m01(172.16.1.61).backup(172.16.1.41).nfs(172.16.1.31).web01(172.16.1.7) ...
- http请求方式和传递数据类型
HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则. GET,通过请求URI得到资源 POST,用于添加新的内容 PUT用于修改某个内容 DELETE ...
- Linux调整日期时间
Linux日期不准确,要更改 Linux 系统整个系统范围的时区可以使用如下命令: sudo rm -f /etc/localtime sudo ln -s /usr/share/zoneinfo/A ...
- Python基础:搭建开发环境(1)
1.Python语言简介 2.Python环境 Python环境产品存在多个. 2.1 CPython CPython是Python官方提供的.一般情况下提到的Python就是指CPython,CPy ...
- python3基本数据类型
python3的基本数据类型: Number(数字).String(字符串).List(列表).Tuple(元组).Set(集合).Dictionary(字典) 不可变数据类型(3 个):Number ...