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許可發布的文檔。
