说明
杂文, crud组件中遇到JSX一些(babel插件)写法, 如不小心点进来了, 可以参考下列教程.
参考:
JSX
babel-plugin-transform-vue-jsx
vuejs/jsx (Babel Preset JSX)
在Vue中使用JSX的正确姿势
Vue如何支持JSX语法
代码
// 方式 1:
<el-button size='mini' on-click={this.test} nativeOnClick={this.nativeClickHandler}>
导出
</el-button>
//方式 2:
<el-button
size='mini'
vOn:click={() => {
console.log('test')
}}>
导出
</el-button>,
// 方式 3:(喜欢用这种) with the spread operator (object needs to be compatible with Vue Data Object):
<el-button
size='mini'
{...{
on: {
click: () => {
console.log('test')
}
}
}}>
导出
</el-button>
附:
使用插槽作用域
2020-02-13
组件.vue
<template>
<div>
<h1>h1hh1</h1>
<slot>default</slot>
<slot name="body" :user="user"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user2: {
firstName: 'first'
}
}
}
}
</script>
使用组件
Vue.component('blog', {
render() {
const scopedSlots = {
body: ({ user }) => <header>header{user.firstName}</header>
}
return (
<SSS scopedSlots={scopedSlots}>
<span>default slot</span>
</SSS>
)
}
})