使用defineProps进行父子组件传值，报异常：'defineProps' is not defined，没法用，看了很多文章都说配置在vue.config.js中：我的vue-cli版本是5.0.8 ，2022-08月装的。
module.exports = {
env: {
"node":true,
"vue/setup-compiler-macros": true
}
}
可是我配置进去，报没有 env 的错误，后来发现在package.json中有此配置
"eslintConfig": {
"root": true,
"env": {
"node": true,
"vue/setup-compiler-macros": true
},
}
把这一段配置加到这里就可以使用了，https://eslint.vuejs.org/user-guide/#installation
父组件：用组合式api很简洁的啊，别用老一套了。
<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>
子组件：
<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来调试了
"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 可以忽略，避免报错
"rules": {
"no-debugger": "off",
"no-console": "off",
"no-unused-vars": [
"error",
{
"varsIgnorePattern": ".*",
"args": "none"
}
]
}
子组件传入复杂类型的props：https://cn.vuejs.org/guide/typescript/composition-api.html
