vue3+tsx踩坑笔记

Html Dom事件适用

🔗 参考链接1

🔗 参考链接2

常用事件

属性	描述
onclick	当用户点击某个对象时调用的事件句柄。
onmouseenter	当鼠标指针移动到元素上时触发。
onmouseleave	当鼠标指针移出元素时触发
onmousemove	鼠标被移动。
onmouseover	鼠标移到某元素之上。
onmouseout	鼠标从某元素移开。
onmouseup	鼠标按键被松开。
onkeydown	某个键盘按键被按下。
onload	一张页面或一幅图像完成加载。
onscroll	当文档被滚动时发生的事件。
onunload	用户退出页面。
onblur	元素失去焦点时触发
onchange	该事件在表单元素的内容改变时触发。
onfocus	元素获取焦点时触发。

---

• 例

  setup(){
    function logs() {
        conslog('触发事件！')
    }
    return () => (
        <div>
        	<button onClick={logs}></button>
        </div>
   }  
  }
  
  

tsx事件绑定

类型声明

• ref

const year = ref(2020)

• reactive

const book = reactive({
    title: string
	year?: number
})

传递参数

使用bind()来绑定参数的形式传参，需要带上this

setup(){
  function logs(val: string) {
      conslog('触发事件！')
  }
  let str = '参数'
  return () => (
      <div>
      	<button onClick={logs.bind(this, str)}></button>
      </div>
 }  
}

在{}内直接赋值

不可将赋值类型出错 需要函数对象

setup(){
  let visible = ref(false)
  return () => (
      <div>
      	<button onClick={() => visible = true}></button>
      </div>
 }  
}

v-if 不适用

需要使用三元操作符来替代 v-if

setup(){
  let visible = ref(false)
  return () => (
      <div>
      	{visible == true ?
              <span>正确</span>
        :
         	<span>错误</span>
         }
      </div>
 }  
}

v-for 不适用

需要使用map遍历替代v-for

setup(){
  let visible = [
  	{num: 1},
    {num: 2},
    {num: 3}
  ]
  return () => (
      <div>
          {visible.map(pro => {
              return (
                <div>{pro.num}</div>	
              )
          })}
      </div>	
 )  
}

所有vue事件不适用

如 .self .stop .prevent 等均失效

阻止冒泡

stopPropagation()

const stopPropagation = (e: any) => {
      let ev = e || window.event
      //阻止冒泡
      ev.stopPropagation()
    //其他部分添加自己的代码	
    }

阻止默认行为

preventDefault()

const stopPropagation = (e: any) => {      let ev = e || window.event      //阻止默认行为      ev.preventDefault()    //其他部分添加自己的代码	    }