vue render jsx 事件绑定 条件渲染 slots 插槽

前文
  • 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>
  • 效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券