future.png
珠玑技术随笔
联系/Contact:
future.png

Vue 3.2 写一个接收参数的动态展示颜色的UI组件

2021年07月19日

Hsu

2分钟

Vue3.2 更新了 script setup 语法糖,再也不用在 setup 函数里 return 一大堆了,默认所有变量都是导出的,写起来很顺畅,越来越好用了。

Vite 2 默认就是 script setup 语法糖。

这次用 Vue3.2 写一个接收 props 改变 style 的 UI 组件。
defineProps 方法用来接收 props。
Vue3.2 的特性都在官方 Blog 中 https://blog.vuejs.org/posts/vue-3.2.html

Vue3 结构

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps({  // defineProps 方法默认是可以不导入直接用的 defineProps` is a compiler macro and no longer needs to be imported.
  color: {
    type: String
  }
})

const rectStyle = computed(() => {
  return {
    display: 'inline-block',
    backgroundColor: props.color,
    width: '10px',
    height: '10px',
  }
})
</script>
<template>
  <div :style="rectStyle"></div>
</template>

<style></style>