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 只 ...
随机推荐
- Now trying to drop the old temporary tablespace, the session hangs.
1.描述 问题描述:删除临时表空间时,会话Hangs挂起 SQL> drop tablespace TEMP_B including contents and datafiles; 2.故障诊断 ...
- [Tjoi 2013]松鼠聚会
3170: [Tjoi 2013]松鼠聚会 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1318 Solved: 664[Submit][Stat ...
- [HNOI2010]STONE取石头游戏
题目描述 A 公司正在举办一个智力双人游戏比赛----取石子游戏,游戏的获胜者将会获得 A 公司提供的丰厚奖金,因此吸引了来自全国各地的许多聪明的选手前来参加比赛. 与经典的取石子游戏相比,A公司举办 ...
- [ZJOI2010]数字计数
题目描述 给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. 输入输出格式 输入格式: 输入文件中仅包含一行两个整数a.b,含义如上所述. 输出格式: 输出文件 ...
- [ZJOI2008]泡泡堂
题目描述 第XXXX届NOI期间,为了加强各省选手之间的交流,组委会决定组织一场省际电子竞技大赛,每一个省的代表队由n名选手组成,比赛的项目是老少咸宜的网络游戏泡泡堂.每一场比赛前,对阵双方的教练向组 ...
- 控制公司 Controlling Companies
题目描述 有些公司是其他公司的部分拥有者,因为他们获得了其他公司发行的股票的一部分.(此处略去一句废话)据说,如果至少满足了以下三个条件之一,公司A就可以控制公司B了: 公司A = 公司B. 公司A拥 ...
- [SCOI2010]幸运数字
题目描述 在中国,很多人都把6和8视为是幸运数字!lxhgww也这样认为,于是他定义自己的“幸运号码”是十进制表示中只包含数字6和8的那些号码,比如68,666,888都是“幸运号码”!但是这种“幸运 ...
- bzoj 3191: [JLOI2013]卡牌游戏
Description N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字为X ...
- POJ1222熄灯问题
千年老题,以前用枚举做,现在用高斯消元做 自由元直接做成0即可 #include<cstdio> #include<cstdlib> #include<algorithm ...
- 17.10.28&29
28上午 骚猪选讲 28下午 BOZJ 1081 [SCOI2005]超级格雷码 感觉就是一个找规律,然后模拟输出.半天没找到一个比较简便的模拟方法,这份代码是学习网上一位大佬的,很巧妙. 代码: # ...