unified
v1.5.0
用于定义VUE组件的统一接口，并使用单个代码库进行反应。
Inkline由@AlexGrozav编写和维护。
主页·文档·故事书·操场
npm install安装依赖项。npm run test 。 @inkline/paper解析为@inkline/paper/vue或@inkline/paper/react 。@inkline/paper => @inkline/paper/vue@inkline/paper => @inkline/paper/react从@inkline/paper导入常见的组件定义接口，并确定您是为vue创建库还是在构建时间react 。
配置tsconfig.json使用自定义h和Fragment JSX Factory功能。
{
"compilerOptions": {
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment"
}
}
h ( type : string , props : Record < string , any > , children : ( VNode | string ) [ ] ) : VNode提起函数h()用于创建元素。
import { h } from '@inkline/paper' ;
const type = 'button' ;
const props = { id : 'button' } ;
const children = [ 'Hello world' ] ;
const node = h ( type , props , children ) ;它也是JSX工厂。
import { h } from '@inkline/paper' ;
const node = < div id = "myid" > Hello world! </ div > defineComponent < Props , State > ( definition : ComponentDefinition < Props , State > ) defineComponent()函数用于设置特定于框架的内部内容并获取类型注释。
import { defineComponent , h } from '@inkline/paper' ;
const Component = defineComponent ( {
render ( ) {
return h ( 'div' ) ;
}
} ) ; import { defineComponent , h } from '@inkline/paper' ;
const Component = defineComponent ( {
render ( ) {
return < div /> ;
}
} ) ;vue.js
< component />React.js
< Component /> defineComponent ( { render ( state : Props & State , ctx : RenderContext ) : VNode } ) render()函数是强制性的，用于使用吊装返回组件标记。
import { defineComponent , h } from '@inkline/paper' ;
const Component = defineComponent ( {
render ( ) {
return h ( 'button' , { } , 'Hello world' ) ;
}
} ) ; import { defineComponent , h } from '@inkline/paper' ;
const Component = defineComponent ( {
render ( ) {
return < button > Hello world </ button > ;
}
} ) ;vue.js
< component />React.js
< Component /> defineComponent ( { setup ( props : Props , ctx : SetupContext ) } ) setup()函数用于准备功能。
import { defineComponent , h } from '@inkline/paper' ;
const Component = defineComponent < { } , { text : string } > ( {
setup ( ) {
return {
text : "Hello world"
} ;
} ,
render ( state ) {
return h ( 'button' , { } , [
state . text
] ) ;
}
} ) ; import { defineComponent , h } from '@inkline/paper' ;
const Component = defineComponent < { } , { text : string } > ( {
setup ( ) {
return {
text : "Hello world"
} ;
} ,
render ( state ) {
return < button > { state . text } </ button > ;
}
} ) ;vue.js
< component />React.js
< Component /> ref < Type > ( defaultValue : Type ) ref变量的工作原理类似于vue.js ref 。要访问或设置参考变量的值，请直接访问或操纵其value字段。
import { defineComponent , ref , h , Ref } from '@inkline/paper' ;
const Component = defineComponent < { } , { text : Ref < string > , onClick : ( ) => void } > ( {
setup ( ) {
const text = ref ( 'Hello world' ) ;
const onClick = ( ) => {
text . value = 'Bye world' ;
}
return {
text ,
onClick
} ;
} ,
render ( state ) {
return h ( 'button' , { onClick : state . onClick } , [
state . text . value
] ) ;
}
} ) ;vue.js
< component />React.js
< Component /> computed < Type > ( ( ) => Type ) import { defineComponent , ref , h , Ref } from '@inkline/paper' ;
const Component = defineComponent < { value : number ; } , { double : Ref < number > } > ( {
setup ( props ) {
const double = computed ( ( ) => props . value * 2 ) ;
return {
double
} ;
} ,
render ( state ) {
return h ( 'button' , { } , [
state . double . value
] ) ;
}
} ) ;vue.js
< component />React.js
< Component /> provide < Type > ( identifier : string , value : Type )
inject < Type > ( identifier : string , defaultValue ?: Type ) : Type import { defineComponent , ref , h , Ref } from '@inkline/paper' ;
const identifier = Symbol ( 'identifier' ) ;
const Provider = defineComponent < { } , { } > ( {
setup ( props , ctx ) {
ctx . provide ( identifier , 'value' ) ;
return { } ;
} ,
render ( state , ctx ) {
return h ( 'div' , { } , [
ctx . slot ( )
] ) ;
}
} ) ;
const Consumer = defineComponent < { } , { value ?: string ; } > ( {
setup ( props , ctx ) {
const value = inject ( identifier , 'defaultValue' ) ;
return { value } ;
} ,
render ( state , ctx ) {
return h ( 'div' , { } , [
` ${ state . value } `
] ) ;
}
} ) ;vue.js
< provider >
< consumer />
</ provider >React.js
< Provider >
< Consumer />
</ Provider > defineComponent ( { props : ComponentProps < Props > } )使用props字段定义道具，使用Vue.js中使用的相同格式来定义道具。
setup()函数以默认为后备接收定义的prop值。
import { defineComponent , h } from '@inkline/paper' ;
const Component = defineComponent < { text : string } , { } > ( {
props : {
text : {
type : String ,
default : ( ) => 'Hello world'
}
} ,
render ( state ) {
return h ( 'button' , { } , [
state . text
] ) ;
}
} ) ;vue.js
< component text =" Button " />React.js
< Component text = { "Button" } /> defineComponent({ slots: string[] })` and `renderContext.slot(slotName)
slots数组允许您为组件定义多个插槽名称。开箱即用， default插槽是预定义的。
slot()函数可在渲染函数执行上下文中可用。
import { defineComponent , h } from '@inkline/paper' ;
const Component = defineComponent ( {
slots : [ 'header' , 'footer' ] ,
render ( state , ctx ) {
return h ( 'div' , { class : 'card' } , [
ctx . slot ( 'header' ) ,
ctx . slot ( ) , // Default slot
ctx . slot ( 'footer' ) ,
] ) ;
}
} ) ;vue.js
< component >
< template #header > Header </ template >
Body
< template #footer > Header </ template >
</ component >React.js
< Component >
< Component . Header > Header </ Component . Header >
Body
< Component . Footer > Header </ Component . Footer >
</ Component > defineComponent({ emits: string[] })` and `setupContext.emit(eventName, ...args)
emits数组允许您定义事件发射器。
emit()函数on[EventName]回调 import { defineComponent , h } from '@inkline/paper' ;
const Component = defineComponent < { } , { emitChange : ( ) => void } > ( {
emits : [ 'change' ] ,
setup ( props , ctx ) {
const emitChange = ( ) => {
ctx . emit ( 'change' ) ;
}
return { emitChange } ;
} ,
render ( state , ctx ) {
return h ( 'button' , { onClick : state . emitChange } , [ ctx . slot ( ) ] ) ;
}
} ) ;vue.js
< component @change =" doSomething " />React.js
< Component onChange = { ( ) => doSomething ( ) } /> 亚历克斯·格罗扎夫（Alex Grozav）
如果您在日常工作中使用Inkline并觉得这使您的生活更加轻松，请考虑在Github赞助商上赞助我。 ？
首页和文档版权所有2017-2022 Inkline作者。根据ISC许可发布的文档。
