Vue3 jsx组件绑定自定义的事件、v-model使用
绑定的事件名称前面加上on,事件名改为驼峰命名法并且首字母大写,拼接上前面的on即可绑定自定义事件。跟onClick绑定事件方式一致。举例:renderDropdown(h){return <el-dropdown onVisibleChange={val => { console.log(val) }}>code...</el-dropdown>}...
·
绑定的事件名称前面加上on,事件名改为驼峰命名法并且首字母大写,拼接上前面的on即可绑定自定义事件。跟onClick绑定事件方式一致。
举例:
renderDropdown(h){
return <el-dropdown onVisibleChange={val => { console.log(val) }}>
code...
</el-dropdown>
}
Vue3 jsx新特性,支持v-model使用,如果组件的v-mdel是modelValue的话,那使用很简单
举例:
renderDropdown(h){
const value = "value"
return <custom-component v-mode={value}>
code...
</custom-component>
}
在Vue2里面,v-mode必须使用value的prop,用法不够灵活。vue3默认绑定的v-model是modelValue,但是允许开发人员自定义v-model绑定的prop,例如v-model:title="pageTitle"
改为绑定title值,使用起来也是很方便,但是在jsx里面使用就不是这样了
举例:比如el-popover的v-model绑定visible,那么要把visible这个绑定的prop名称放进数组的第二元素里面,第一个属性放传递给el-popover组件的变量名
renderDropdown(h){
const show = "true"
// return <el-popover v-model:visible={show}> //报错
return <el-popover v-model={[show, 'visible']}>
code...
</el-popover>
}
更多推荐
已为社区贡献1条内容
所有评论(0)