- 使用nextTick
import { nextTick } from "vue";
const fn = async () => {
...
await nextTick()
...
}
- computed使用方法
import { computed } from '@vue/reactivity'
// 简写
const val = computed(()=>{
return 'xxxx'
})
// 完整写法
const val = computed({
get() {
return 'xxx'
},
set(value) {
val.value = value
}
})
- 获取ref元素的方法
//情况一:
<template>
<div ref="refs">xxx</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const refs = ref<HTMLElement>()
console.log(refs.value)
//<div>xxx</div>
</script>
//情况二:
<template>
<div ref="ref1">xxx</div>
<div ref="ref2">xxx</div>
</template>
<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
const allRef = getCurrentInstance()
console.log(allRef.refs)
//ref1:div
//ref2:div
</script>
-
watch监听
-
子组件执行父组件的方法
// 父组件
<child @handle="handle"></child>
const handle = val => {
console.log('xxx',val)
}
// 子组件
import { defineEmits } from "vue";
const emit = defineEmits(['handle'])
emit('handle','aaa') // xxx aaa