Vue中已使用msg_却触发‘已赋值但未使用’错误的原因咨询

这个报错的核心原因很明确：你在setup函数里定义了msg_变量，但没有把它暴露给模板使用。

虽然你在模板里写了<HelloWorld :msg="msg_"/>，但你的setup函数最后只返回了props，完全没把msg_加入返回对象。模板根本访问不到这个变量，ESLint就会判定它“赋值后未被使用”。

修复方法 #

修改setup的返回语句，把msg_也包含进去，这样模板就能正确访问到这个响应式变量，报错自然消失：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld :msg="msg_"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup(props) {
    
    var msg_ = ref({msg:"msg from parent"})
  
    return {
      props,
      msg_ // 将msg_暴露给模板
    }
  }
}
</script>

补充说明 #

在Vue 3的Composition API中，setup函数返回对象里的属性，才是模板可以直接调用的响应式变量或方法。如果只定义变量却不返回，模板无法使用，ESLint就会触发“未使用变量”的规则报错。

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