vuejs关于函数式组件的探究
所以,在控制台里app1.exist 或app2.exist都可以控制是否显示字母.
<!DOCTYPE html>
<html lang='zh'>
<head>
<title>TEST</title>
</head>
<body>
<div id="app1">
<non-func :c_exist="exist"></non-func>
</div>
<div id="app2">
<is-func :c_exist="exist"></is-func>
</div>
<script src="https://cdn.staticfile.org/vue/2.1.6/vue.min.js"></script>
<script>
var render1 = function (h) {
var children = []
if (this.c_exist) {
children.push('Non-functional component')
}
return h('div', {}, children)
}
Vue.component('non-func',{
render :render1,
props:['c_exist'],
})
var app1 = new Vue({
el : '#app1',
data : {
exist:true,
},
})
// functional component
var render2 = function (h, ctx) {
console.log(ctx)
var children = []
if (ctx.data.attrs.c_exist) {
children.push('functional component')
}
return h('div', {}, children)
}
Vue.component('is-func',{
functional: true,
render :render2,
})
var app2 = new Vue({
el : '#app2',
data : {
exist:true,
},
})
</script>
</body>
</html>
这样也可以:
var render2 = function (h, ctx) {
console.log(ctx)
var children = []
if (ctx.props.c_exist) {
children.push('functional component')
}
return h('div', {}, children)
}
Vue.component('is-func',{
functional: true,
render :render2,
props:['c_exist'],
})
var app2 = new Vue({
el : '#app2',
data : {
exist:true,
},
})
vuejs关于函数式组件的探究的更多相关文章
- Vuejs函数式组件，你值得拥有(1)
函数式组件在React社区很流行使用,那么在vue里面我们要怎么用呢 下面会涉及到的知识点: 高阶函数.状态.实例.vue组件 什么是函数式组件 我们可以把函数式组件想像成组件里的一个函数,入参是渲染 ...
- 【vue】函数式组件
在 2.5.0 及以上版本中,如果你使用了单文件组件,那么基于模板的函数式组件可以这样声明: <template functional> <div class="cell& ...
- 渲染函数render和函数式组件
vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...
- react 中的无状态函数式组件
无状态函数式组件,顾名思义,无状态,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑. 其实无状态函数式组件也是 ...
- Vue函数式组件的应用
一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1. 以局部组件为例,将组件标记为 functional=ture; 因为 ...
- 如何对 React 函数式组件进行优化
文章首发个人博客 前言 目的 本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用.另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks ...
- Vue.js 源码分析(三十) 高级应用 函数式组件 详解
函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...
- React函数式组件使用Ref
目录: 简介 useRef forwardRef useImperativeHandle 回调Ref 简介 大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象,进而对子组件进 ...
- Vue 函数式组件 functional
函数式组件 无状态 无法实例化 内部没有任何生命周期处理函数 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件,无逻辑和状态修改) 在template标签里标明functional 只 ...
随机推荐
- jacascript 函数声明、函数表达式与声明提升(hoisting机制)
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 声明.定义.初始化 声明的意思是宣称一个变量名的存在,定义则为这个变量分配存储空间,初始化则是给该变量名的 ...
- linux系统命令学习系列8-文件相关操作touch,rm,mv,cat,head,tail命令
上节内容: 系统和目录管理 Pwd命令 .和..目录 相对路径和绝对路径 作业:进入opt路径,分别使用相对路径方法和绝对路径方法进入到其实任意一个子目录 cd /opt 相对路径 cd rh 绝对路 ...
- 使用Swoole测试MySQL在特定SQL下的并发性能
场景描述 从全文检索或者缓存中获取ID,根据ID查询数据库获取基础信息,进行页面展示 SQL:select * from table where id in(id1,id2,id3...id40) 此 ...
- 爆炸，解体，入侵，你想得到的你想不到的大BUG们
郑昀 创建于2017/9/29 最后更新于2017/10/6 提纲: 阿丽亚娜火箭的解体 阿波罗飞船的P01模式 德勤的Google+ 麻省理工的500英里邮件 又到了扶额兴叹的节气.(前文回顾:5年 ...
- Java中Set集合是如何实现添加元素保证不重复的？
Java中Set集合是如何实现添加元素保证不重复的? Set集合是一个无序的不可以重复的集合.今天来看一下为什么不可以重复. Set是一个接口,最常用的实现类就是HashSet,今天我们就拿HashS ...
- [原创软件]Maya语言切换工具
软件主要功能: 切换Maya语言 软件界面截图: 开发环境及语言: c# .NET Framework 4.0 Visual Studio 2015 更新日志: v1.0(2016.7.20) 发布初 ...
- Tab标签js切换高效率写法
原来的传统写法: function tabit(id,cid) { for(var i=0; i<10; i++){ gi(["tab"+i]).className = &q ...
- 【java】doc转pdf
市场上主流的 WORD 转 PDF 工具有两个:OpenOffice 和 Microsoft Office 转换插件,可以通过部署这两个工具实现 WORD 转 PDF 功能. 1: Microsoft ...
- 【实验吧】CTF_Web_简单的SQL注入之3
实验吧第二题 who are you? 很有意思,过两天好好分析写一下.简单的SQL注入之3也很有意思,适合做手工练习,详细分析见下. http://ctf5.shiyanbar.com/web/in ...
- 使用C# (.NET Core) 实现组合设计模式 (Composite Pattern)
本文的概念性内容来自深入浅出设计模式一书. 本文需结合上一篇文章(使用C# (.NET Core) 实现迭代器设计模式)一起看. 上一篇文章我们研究了多个菜单一起使用的问题. 需求变更 就当我们感觉我 ...