vue知识点小计(不定时新增)

1、判断一个对象里面的字段有没有空的

const checkEmpty = (row: any) => {
      const result = Object.keys(row).some((key) => row[key] === '')
      return result
    }

2、css绑定动态值

例如:
<script setup>
import { ref } from "vue"
const theme = ref("red")

const colors = ["blue", "yellow", "red", "green"]

setInterval(() => {
  theme.value = colors[Math.floor(Math.random() * 4)]
}, 500)

</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme')
}
</style>

3、在vue单文件组件里面的样式想应用全局

<template>
  <p>Hello Vue.js</p>
</template>

<style scoped>
:global(p) {
  font-size: 20px;
  color: red;
  text-align: center;
  line-height: 50px;
}

:global(body) {
  width: 100vw;
  height: 100vh;
  background-color: burlywood;
}
</style>

4、vue3 teleport 传送门组件，提供一种简洁的方式，可以指定它里面的内容的父元素。通俗易懂地讲，就是 teleport 中的内容允许我们控制在任意的DOM中，使用简单。

<teleport to="body">
    <div>
	   创建的内容
	 </div>  
</teleport>
<teleport to="body"></teleport> 就是加入body元素内，使用的是标签名
<teleport to=".body"></teleport> 就是加入body元素内，使用的是类名
<teleport to="#body"></teleport> 就是加入body元素内，使用的是id名

5.props验证

验证Button组件的Prop类型 ，使它只接收: primary | ghost | dashed | link | text | default ，且默认值为default。
<script setup>
defineProps({
  type: {
    type:String,
    validator(value){
      return ['primary','ghost','dashed','link','text','default'].includes(value)
    },
    default:'default'
  },
})
</script>

<template>
  <button>Button</button>
</template>