Vue3踩坑记录

'defineProps' is not defined

vue3+webpack5+ts

# 版本8以上
$ npm i eslint@latest -D
$ npm i eslint-plugin-vue@latest -D
# 后续若出现TypeError: eslint.CLIEngine is not a constructor错误执行以下命令
$ npm uninstall @vue/cli-plugin-eslint

TypeError: eslint.CLIEngine is not a constructor

vue3+webpack5+ts

$ npm uninstall @vue/cli-plugin-eslint

用$refs获取子组件

1. 像在vue2中一样，给组件设置ref="xxx"项

   <template>
   	<child-comp ref="child">
     	我是子组件
     </child-comp>
   </template>
   <script setup>
     import ChildComp from "./ChildComp.vue";
     import { ref } from "vue";
     const child = ref()
   </script>
   

2. vue3中通过ref来获取，变量名需与ref='xxx'一致

   <template>
   	<child-comp ref="child">
     	我是子组件
     </child-comp>
   </template>
   <script setup>
     import ChildComp from "./ChildComp.vue";
     import { ref } from "vue";
     const child = ref()
   </script>
   

3. 在onMounted函数中打印获取到的子组件，否则打印出undefined

   <template>
   	<child-comp ref="child">
     	我是子组件
     </child-comp>
   </template>
   <script setup>
     import ChildComp from "./ChildComp.vue";
     import { ref } from "vue";
     const child = ref()
     onMounted(() => {
       console.log(child.value)//打印结果： Proxy {...}
     })
   </script>
   

4. 为了使用子组件中的变量或方法，需要在子组件中使用defineExpose编译器宏

   <!-- ChildComp.vue -->
   <template>子组件内部</template>
     
   <script setup>
   const greet = () => {
     console.log("hello parent!");
   }
   defineExpose({
     greet
   });
   </script>
     
   <style>
   </style>
   

5. 父组件调用时用child.value.xxx来调用

   <template>
   	<child-comp ref="child">
     	我是子组件
     </child-comp>
   </template>
   <script setup>
     import ChildComp from "./ChildComp.vue";
     import { ref } from "vue";
     const child = ref()
     onMounted(() => {
       console.log(child.value)//打印结果： Proxy {...}
       child.value.greet()
     })
   </script>
   

vue-router配置*页面

vue3+vite2+ts+vue-router4

// vue2中
{
  path: '*'
}
// vue3中 用 /:pathMatch(.*)* 或 /:pathMatch(.*) 或 /:catchAll(.*)
{
  path: '/:pathMatch(.*)'
}