摘要
本篇记录vue3和vue2在实现相同的逻辑上的一些语法差异,持续更新。
事件绑定
在开发过程中会遇到需要定制一些video或者audio播放组件,需要用到一些原生的事件。但是vue3和vue2原生事件的绑定是不一样的。
例如下面的音频播放组件
vue2中只需要在mounted(组件渲染完成的时候)在获取dom元素上直接绑定事件就可以
mounted(){
this.$refs.audioRef.onloadedmetadata = (evt)=>{
// 编写自己的逻辑
xxxxx
}
}
但是在vue3中,如果你也按照这样的逻辑编写
let audioRef = ref()
onMounted(()=>{
audioRef.value.onloadedmetadata = (evt)=>{
// 编写自己的逻辑
xxxxx
}
})
// 上面这种事件不会触发,根本就像没有绑定一样
所以需要改成如下写法
<audio
ref="wechatVoice"
:src="audioSrc"
v-bind="{ onloadedmetadata, onended }"
>
Your browser does not support the
<code>audio</code>
element.
</audio>
<script lang="ts" setup>
const onloadedmetadata = (evt) => {
// 编写加载完成之后的逻辑
}
const onended = (evt) =>{
// 编写播放完成之后的逻辑
}
</script>
评论区