wonderful-panda/vue-tsx-support

How to use global components?

Closed this issue · 1 comments

Whole project use Element-ui, so i global registered some basic components, like this:

import { Row, Button, Select } from 'element-ui'
import 'element-ui/packages/theme-chalk/src/row.scss'
import 'element-ui/packages/theme-chalk/src/icon.scss'
import 'element-ui/packages/theme-chalk/src/button.scss'
import 'element-ui/packages/theme-chalk/src/select.scss'

Vue.use(Row)
Vue.use(Button)
Vue.use(Select)

use like this:

import { CreateElement } from 'vue'
import { Component, Vue } from 'vue-property-decorator'
import $style from './index.module.scss'

@Component
export default class extends Vue {
  private render(h: CreateElement) {
    return (
      <ElRow class={$style.wrapper}>
        <ElButton>this is a button</ElButton>
      </ElRow>
    )
  }
}

runing correct, but IDE and console show error message: Cannot find name 'ElRow'

how can i use it in tsx not show error message?

fine, use kebab-case:

import { CreateElement } from 'vue'
import { Component, Vue } from 'vue-property-decorator'
import $style from './index.module.scss'

@Component
export default class extends Vue {
  private render(h: CreateElement) {
    return (
      <el-row class={$style.wrapper}>
        <el-button>this is a button</el-button>
      </el-row>
    )
  }
}

┐(:´ ゞ`)┌