vue3 tips
利用计算属性动态设置 class
const myComputedClasses = computed(() => {
return {
invalid: !isValid.value, //A reactive variable in my state
valid: isValid.value, //A reactive variable in my state
error: isError.value //A reactive variable in my state
}
})
直接将样式绑定到数据上。
const color = ref('#f000');
<style>
.text {
color: v-bind(color);
}
</style>
使用 v-deep 来重写第三方组件的样式。
::v-deep(.some-selector-in-child-component) { font-weight: bold; }
$event表示子组件进行 $emit 的时候的第二个参数
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const count = ref(1)
// 需求：希望 count 传递给子组件，子组件也要修改这个count
</script>
<template>
<div>
<Child :count="count" @changeCount="count = $event">
</div>
</template>
// Child.vue
<script setup>
defineProps(['count'])
</script>
<template>
<div>
count:8
<button @click="$emit('changeCount',8)">改为8
</div>
</template>
