How to use global components?
Closed this issue · 1 comments
Maorey commented
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?
Maorey commented
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>
)
}
}
┐(:´ ゞ`)┌