vue3.2 setup语法糖封装tag组件

记忆怪 bug

已于 2022-08-25 17:33:58 修改

阅读量581

点赞数

分类专栏： vue3 setup 语法糖文章标签： vue.js

于 2022-08-25 17:15:44 首次发布

本文链接：https://blog.csdn.net/m0_66051368/article/details/126528558

版权

vue3 setup 语法糖专栏收录该内容

9 篇文章 0 订阅

订阅专栏

tag.vue 组件

<template>
  <span class="tag" v-bind="props" ref="tag"></span>
</template>

<script setup>
import { defineProps, ref, onMounted } from 'vue'
const props = defineProps({
  name: {
    type: String,
    default: null
  },
  theme: {
    type: String,
    default: null
  }
})

const tag = ref('')
onMounted(() => {
  console.log('props==', props)
  console.log('tag==', tag.value)
  setName()
  setTheme()
})
const setName = () => {
  tag.value.innerHTML = props.name
}
const setTheme = () => {
  tag.value.style.backgroundColor = props.theme
}
</script>

<style lang="less" scoped>
.tag {
  background-color: red;
  color: #ffffff;
  font-size: 0.3rem;
  border-radius: 1vw;
  padding: 0 0.1rem;
}
</style>

setup语法糖中，props需要用defineProps来定义，然后在使用时直接props。

注意：

Q：props如何获取？

A：

onMounted(() => {
console.log('props==', props)
})

Q：DOM元素如何获取？

A：

const tag = ref('')
onMounted(() => {
console.log('tag==', tag.value)
})

使用时直接tag.value.innerHTML

Q：definePropsu需要引入吗？

A：defineProps可以不要引入，但是eslint可能会检测到defineProps未定义，所以还是引入下吧

直接在父组件引入使用即可

<template>
   <tag :name="name" :theme="theme"></tag>     
</template>

<script setup>
import { ref } from 'vue'
const name = ref('牛牛')
const theme = ref('cyan')
</script>