Vue.js 3中如何通过CustomEvent改组件颜色？遇props报错求解

错误根源 #

你遇到的vue/no-mutating-props错误，本质是违反了Vue的单向数据流规则：组件的props是父组件传递过来的只读数据，子组件不能直接修改props的值。和你传递的{"type":"success"}格式无关，问题出在Snackbar组件内部修改了type这个prop。

具体解决步骤 #

1. 用本地响应式状态中转props（需要修改type时用） #

如果你的组件需要在内部修改type的值，不要直接操作props，而是创建一个本地的响应式变量，用prop的值初始化它，后续操作都用这个本地变量：

<script setup>
import { ref, watch } from 'vue'
// 定义接收的props
const props = defineProps({
  type: {
    type: String,
    default: 'info' // 设置默认值避免空值问题
  }
})
// 创建本地响应式状态，用prop的值初始化
const localType = ref(props.type)

// 可选：如果父组件更新了type prop，同步到本地状态
watch(() => props.type, (newType) => {
  localType.value = newType
})

// 后续计算CSS类或修改type时，都用localType
const snackbarClass = ref(`snackbar snackbar--${localType.value}`)
</script>

2. 仅用prop做计算（不需要修改type时用） #

如果只是根据type计算CSS类，完全不需要修改prop，直接用computed生成类名即可，根本不会触发报错：

<script setup>
import { computed } from 'vue'
const props = defineProps({
  type: {
    type: String,
    default: 'info'
  }
})
// 用computed基于prop生成类名，全程不修改prop
const snackbarClass = computed(() => {
  return `snackbar snackbar--${props.type}`
})
</script>

<template>
  <div :class="snackbarClass" class="snackbar">{{ message }}</div>
</template>

3. 检查事件触发与监听逻辑 #

确保触发CustomEvent时传递的数据格式正确，且监听事件时是把数据赋值给组件的prop（或本地状态），而非在子组件内修改prop：

// 触发事件的代码（比如父组件或其他地方）
window.dispatchEvent(new CustomEvent('showSnackbar', {
  detail: { type: 'success', message: '操作完成' }
}))

// 监听事件并控制Snackbar显示的组件（比如App.vue）
<script setup>
import { ref } from 'vue'
const showSnackbar = ref(false)
const snackbarType = ref('info')
const snackbarMsg = ref('')

window.addEventListener('showSnackbar', (e) => {
  snackbarType.value = e.detail.type
  snackbarMsg.value = e.detail.message
  showSnackbar.value = true
})
</script>

<template>
  <Snackbar 
    v-show="showSnackbar" 
    :type="snackbarType" 
    :message="snackbarMsg"
    @close="showSnackbar = false"
  />
</template>

核心提醒 #

Vue3中props是只读的，任何直接修改props.type = 'xxx'的代码都会触发这个ESLint错误，找到并删除这类代码，换成操作本地状态即可解决问题。

内容的提问来源于stack exchange，提问作者JURE BAJC