unified
v1.5.0
อินเทอร์เฟซแบบครบวงจรสำหรับการกำหนดส่วนประกอบสำหรับ Vue และตอบสนองโดยใช้ฐานรหัสเดียว
Inkline เขียนและดูแลโดย @alexgrozav
หน้าแรก·เอกสาร·หนังสือนิทาน·สนามเด็กเล่น·ตัวติดตามปัญหา
npm installnpm 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 ชั่นโรงงาน JSX ที่กำหนดเองและ Fragment
{
"compilerOptions": {
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment"
}
}
h ( type : string , props : Record < string , any > , children : ( VNode | string ) [ ] ) : VNode ฟังก์ชั่น Hoist 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
