Vue中JSX用法(杂文,个人标记)

说明

杂文, 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>

附:

Vue Data Object

使用插槽作用域

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>
    )
  }
})