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()    //其他部分添加自己的代碼	    }