Vue非TypeScript环境下父组件向子组件传递props及访问方法

开发者阿泽

2026-8-4

Vue 3 Props传递与ESLint问题解决

1. App.vue中传递`clicked`的方式是否正确？

传递方式是正确的。:clicked="clicked"是Vue 3中动态绑定props的标准语法，冒号:表示将父组件中ref类型的clicked的实时值传递给子组件，子组件可以直接使用该值进行条件渲染逻辑。

2. 非TypeScript环境下如何在子组件中接收props？

分两种组件写法场景处理：

选项式API（非`<script setup>`）

直接在组件的props选项中定义接收的属性，指定类型、必填性等规则：

<script>
export default {
  props: {
    clicked: {
      type: Boolean,
      required: true // 根据业务需求可设为false
    }
  }
}
</script>

<template>
  <div v-if="clicked">仅当clicked为true时显示</div>
</template>

组合式API（`<script setup>`）

使用Vue 3内置的defineProps编译器宏（无需导入），通过对象语法定义props规则：

<script setup>
// 定义并接收props
const props = defineProps({
  clicked: {
    type: Boolean,
    required: true
  }
})

// 可解构后直接使用
const { clicked } = props
</script>

<template>
  <div v-if="clicked">仅当clicked为true时显示</div>
</template>

3. 如何解决`defineProps`相关的ESLint报错？

defineProps是Vue 3 <script setup>专属的编译器宏，ESLint默认未将其识别为全局变量，需通过ESLint配置解决：

确保已安装eslint-plugin-vue插件（Vue项目通常默认已安装）
在ESLint配置文件（如.eslintrc.js、.eslintrc.json）中，启用vue/setup-compiler-macros环境：

// .eslintrc.js示例配置
module.exports = {
  env: {
    browser: true,
    es2021: true,
    // 关键配置：告知ESLint这是Vue 3 setup语法的编译器宏
    'vue/setup-compiler-macros': true
  },
  extends: [
    'plugin:vue/vue3-essential'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  plugins: [
    'vue'
  ]
}