vue3使用记录

1.组件状态驱动css

<template>
 <el-avatar :size="logoHeight"></el-avatar>
</template>

<script setup>
const logoHeight = 44
</script>

<style lang="scss" scoped>
.logo-container {
  height: v-bind(logoHeight) + 'px';
}
</style>

2.vue3监听reactive定义的响应式数据没有办法获取到正确的oldVal，ref定义的可以

watch(person,(newVal,oldVal)=>{

})
let person = reactive({
    name: '张三'
})

3.把一个reactive对象转成普通对象，或者把props转成普通对象，属性还具有响应式

//reactive
const state = reactive({
    age:15
})
const {age} = toRefs(state)

//props
const props = defineProps({
    obj: {
        type: Object
    }
})
const {obj} = toRefs(props)

4.teleport 用法 把里面的内容瞬间移动

<teleport to="#modal">
     <div id="center" v-if="isOpen"> 
     <h2><slot>this is a modal</slot></h2> 
     <button class="btn2" @click="buttonClick">Close</button> </div> 
 </teleport>

<div id="app"></div>
    //先行定义一个锚点
 <div id="modal"></div>

这样被teleport 包裹的内容就会瞬移到app平级的modal下面
 

5.defineExpose父组件调用子组件的方法

父组件：

<HelloWorld :msg="msg" ref="child"></HelloWorld>   //ref定义的东西会被劫持
const child = ref(null)
const useChild = ()=>{
  child.value?.show()
}

子组件：

import {defineExpose} from "vue";

const  show = ()=>{
  alert('组组件show了')
}
defineExpose({show})