vue3 jsx實現雙向繫結
作者：由 wilikeit 發表于 攝影時間：2021-05-04
<
script
>
import
{
defineComponent
，
reactive
}
from
‘vue’
；
export
default
defineComponent
（{
setup
（）
{
var
state
=
reactive
（{
myname
：
‘’
，
myage
：
‘’
}）
var
add
=
（
e
）=>
{
console
。
log
（
e
）
state
［
e
。
target
。
name
］
=
e
。
target
。
value
}
return
{
state
，
add
}
}，
render
（）
{
return
（
<
div
>
<
h1
>
名字
：
{
this
。
state
。
myname
}
<
/h1>
{
/*注意用onInput，不是onChange*/
}
<
input
type
=
“text”
name
=
“myname”
onInput
=
{（
e
）=>
this
。
add
（
e
）}
/>
。
<
h1
>
年齡
：
{
this
。
state
。
myage
}
<
/h1>
<
input
type
=
“text”
name
=
“myage”
onInput
=
{（
e
）=>
this
。
add
（
e
）}
/>
<
/div>
）
}
}）
<
/script>
照著react的實現方式，搬到vue3中，用了onChange，發現並沒有在輸入時標題跟著變化，原來react中onChange是輸入時就觸發了add函式，而vue3中用onChange，只是丟失焦點才觸發add函式，改成onIput即可解決
vue3的jsx跟react大體相似，但vue3 jsx還能寫指令，如：
render（）
{
return （
）
}
//可使用駝峰方式
render（）
{
return （
）
}
這或許是vue3的特點吧，將jsx跟指令結合
下一篇：蒜頭鼻的女人和蒜頭鼻的男人
