vue render jsx 事件绑定 条件渲染 slots 插槽
vue render jsx 事件绑定 条件渲染 slots 插槽
yangdongnan
发布于 2019-04-27 21:01:32
发布于 2019-04-27 21:01:32
前文
- vue中使用 render写一些展示组件
- 通过实现一个简单的单元 cell 组件, 来了解render jsx 在vue的使用
- 将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0 版本开始，我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入 const h = this.$createElement，这样你就可以去掉 (h) 参数了。对于更早版本的插件，如果 h 在当前作用域中不可用，应用会抛错。
render(){
return (
<div><div>
)
}jsx 中 使用 if else 条件判断
- { } 中判断一个条件是否为真
<div class={'e-cell--right'} on-click={change.bind(this)}>
{
check
? <span class={'e-cell-icon'}></span>
: ''
}
</div>ps ： check 为真时的效果
在这里插入图片描述
在这里插入图片描述
绑定事件
- jsx 中绑定事件 可以写原生的事件名 如 onClick 驼峰式 也可以用 ’ - ’ 短线相连 如下
- 通过 [event.name].bind(this) 绑定事件
<div class={'e-cell--right'} on-click={change.bind(this)}>
{
check
? <span class={'e-cell-icon'}></span>
: ''
}
</div>在render 中使用 slot 插槽
- this.$slots.default 可以获取 slot 传递的内容， vnode
- 通过 vue中 vnode h() 来渲染
- 插槽中的元素 可以使用组件的样式命名 或是定义 指定子级样式 使用 * 定义样式
render(h){
const {label, value, check, change} = this
return (
<div class={'e-cell'}>
<div class={'e-cell--content'}>
<span class={'e-cell--label'}>{label}</span>
{
this.$slots.default
? h('i', this.$slots.default)
: <div class={'e-cell--value'}>{value}</div>
}
</div>
</div>
)
},
// less
.e-cell--content{
.e-cell--label{
display: inline-block;
width: 120px;
font-size:28px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(51,51,51,1);
line-height:40px;
}
.e-cell--value,*{ //关于插槽样式
font-style: normal;
font-size:24px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(51,51,51,1);
line-height:40px;
}
}完整代码
//cell组件的样式
import './cell.less'
export default {
name:'ECell',
//允许传入的参数
props:{
label:{
type:String,
default:'T'
},
value:{
type:String,
default:'(T (共2888点，抵20元))'
}
},
data(){
return {
check:false,
}
},
//绑定一个事件， 通知是否被点击
methods:{
change(){
this.check = !this.check
this.$emit('change', {evt:this.label, select: this.check})
},
},
// render vue官方对 h 的描述 这是一个约定
render(h){
const {label, value, check, change} = this
return (
<div class={'e-cell'}>
<div class={'e-cell--content'}>
<span class={'e-cell--label'}>{label}</span>
{
this.$slots.default
? h('i', this.$slots.default)
: <div class={'e-cell--value'}>{value}</div>
}
</div>
<div class={'e-cell--right'} on-click={change.bind(this)}>
{
check
? <span class={'e-cell-icon'}></span>
: ''
}
</div>
</div>
)
},
}ps: 使用 cell 组件
//局部
import ECell from '../../lib/cell'
components:{ECell},- value 绑定 和 slot 使用1种即可
<ECell ref="cake"
label="T币"
:value="`(T币 (共${prouctList.cake || 0}币，抵${Number(prouctList.cake || 0) /100}元))`"
@change="handleChangeCake">
<i>{{`(T币 (共${prouctList.cake || 0}币，抵${Number(prouctList.cake || 0) /100}元))`}}</i>
</ECell>- 效果
在这里插入图片描述
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年04月26日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录