vue3组件传值defineProps/回调defineEmits/子组件属性defineExpose/'defineProps' is not defined/Unexpected 'debugger' statement no-debugger/no-unused-vars/is assigned a value but never used

使用defineProps进行父子组件传值，报异常：'defineProps' is not defined，没法用，看了很多文章都说配置在vue.config.js中：我的vue-cli版本是5.0.8  ，2022-08月装的。

?

1 2 3 4 5 6

module.exports = {   env: {     "node":true,     "vue/setup-compiler-macros": true   } }

可是我配置进去，报没有 env 的错误，后来发现在package.json中有此配置

?

1 2 3 4 5 6 7

"eslintConfig": {     "root": true,     "env": {       "node": true,       "vue/setup-compiler-macros": true     }, }

　　把这一段配置加到这里就可以使用了，https://eslint.vuejs.org/user-guide/#installation

父组件：用组合式api很简洁的啊，别用老一套了。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

<template>   <input     type="text"     v-model="message"   />   <test-com     :address='message'     @handle='callbackHandle'     ref='childComponentInfo'   />   <br />   <button @click="getchildComponentInfo()">UserName</button> </template> <script setup> // 组合式api import { ref } from "vue"; import TestCom from "./components/TestCom.vue"; const message = ref("Hello Vue!"); const childComponentInfo = ref(null);//定义一个属性，指定为子组件实例，可以访问子组件暴露出的属性 const callbackHandle = (addr) => {   console.log("parent:" + addr); }; const getchildComponentInfo = () => {   console.log("userName:"+childComponentInfo.value.userInfo.userName);   console.log("stuName:"+childComponentInfo.value.stuInfo.stuName); };   </script> // <script> // 选项式api // import HelloWorld from "./components/HelloWorld.vue"; // export default { //   name: "App", //   components: { //     // HelloWorld, //     TestCom, //   }, //   methods: { //     callbackHandle(addr) { //       console.log("parent:" + addr); //     }, //   }, //   data() { //     return { //       message: "Hello Vue!", //     }; //   }, // }; // </script>

子组件：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<script setup> import {reactive} from 'vue' // const props = defineProps(['address']);//写法1 //写法2，带类型 const props = defineProps({   address: String, }); const emits = defineEmits(["handle"]); const userInfo = reactive({userName:"jay.star",age:33}); const stuInfo = reactive({stuName:"jack",age:22}); defineExpose({userInfo,stuInfo});//暴露子组件的属性，父组件可以直接访问 const btnClick = function () {   console.log("child:" + props.address);   emits("handle", props.address); }; </script> <template>   <div>     {{props.address}}     <br />     {{userInfo}}     <button @click="btnClick()">ShowName</button>   </div> </template>

　　方便。。。https://blog.csdn.net/qq_43185384/article/details/125208794
https://cn.vuejs.org/guide/essentials/template-refs.html#ref-on-component

问题：Unexpected 'debugger' statement no-debugger，package.json 中的rules节点加入可调试的配置，这样就可以在js中加debugger来调试了

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

"eslintConfig": {     "root": true,     "env": {       "node": true,       "vue/setup-compiler-macros": true     },     "extends": [       "plugin:vue/vue3-essential",       "eslint:recommended"     ],     "parserOptions": {       "parser": "@babel/eslint-parser"     },     "rules": {       "no-debugger": "off",       "no-console": "off"     }   },

　　已声明的变量或函数没有被使用，会报错 obj is assigned a value but never used，加上配置 no-unused-vars 可以忽略，避免报错

?

1 2 3 4 5 6 7 8 9 10 11

"rules": {       "no-debugger": "off",       "no-console": "off",       "no-unused-vars": [         "error",         {           "varsIgnorePattern": ".*",           "args": "none"         }       ]     }

　　子组件传入复杂类型的props：https://cn.vuejs.org/guide/typescript/composition-api.html