vue3 tsx 双向数据绑定

• Z时代
• 2024-02-23
• 分类：IT

请教一下 vue3、tsx 开发中遇到的问题

如何改为双向数据绑定

import { defineComponent, ref } from "vue"
export defualt defineComponent({
  setup() {
    const number = ref(0)
    return () => (<div>
      <input value={number.value}>
      {number.value}
    </div>)
  }
})

想实现点击Button不触发Div，应该如何添加事件修饰

import { defineComponent } from "vue"
export default defineComponent({
  setup() {
    const clickButton = () => {
      console.log("click button")
    }
    const clickDiv = () => {
      console.log("click div")
    }
    return () => (<div onClick={clickDiv}>
      <button onClick_stop={clickButton}>Click</button>
    </div>)
  }
})

回答：

第一个问题：
第二个问题：自己写阻止事件冒泡 jsx 还不支持修饰符

绑定原生输入

<input v-model={val} />
<input v-model={[val, ["modifier"]]} />

绑定组件

<Com v-model={[val, "modelValue"]} />

绑定多个 model

<Com v-models={[[val.value, "modelValue"],[val.lable, "lable"]]} />

参考 https://github.com/vuejs/jsx-...

以上是 vue3 tsx 双向数据绑定 的全部内容， 来源链接： utcz.com/p/936204.html