Vue3学习碰到的一些问题记录_vue3 defineprops default没用

问题1：如何不去频繁的引入例如：reactive，ref，defineEmits，defineProps这样的方法

解决方案：引入插件 unplugin-auto-import

//并且在在vite.config.js中配置
 plugins: [
    vue(
      { reactivityTransform: true }
    ),
    AutoImport(
      {
        imports:['vue','vue-router']
      }
    )
  ]
1
2
3
4
5
6
7
8
9
10
11

问题2：无法使用input框中的change事件去监听当前实时输入内容

解决方案：在input标签使用这个属性能够监听 v-on:input=“changeValue”

问题2.1 父子以及两兄弟组件如何互相通信（提供两种解决方法）

思路：由父组件作为中介向两兄弟组件传播数据

父组件

<template>
  <div>
    <div>
      <h1>父组件</h1>
      <input type="text" v-model="valueParent" />
    </div>
    <A v-model:valueParent="valueParent" />
    <B v-model:valueParent="valueParent" />
  </div>
</template>
  
<script setup>
import A from "./a.vue";
import B from "./b.vue";
let valueParent = ref("父组件初始值");
,
</script>
  
  <style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意：这里的v-model:valueParent="valueParent"会报错，不用管，因为如果你是刚开始使用vue3，vscode中的Vetur没有兼容这个写法，小问题，百度一下改下配置就好了，若果你真的觉得无法忍受那就自己去改了。

子组件A

<template>
  <div>
    <h1>子组件A</h1>
    <input type="text" v-on:input="changeValue" v-model="valueParent" />
  </div>
</template>
    
  <script setup>
defineProps({
  valueParent: {
    type: String,
    default: "aaa",
  },
});
let emit = defineEmits(["update:valueParent"]);
const changeValue = (event) => {
  console.log(event);
  emit("update:valueParent", event.target.value);
};
</script>
    
  <style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

子组件B

<template>
  <div>
    <h1>子组件B</h1>
    <input type="text" v-on:input="changeValue2" v-model="valueParent" />
  </div>
</template>
  
<script setup>
defineProps({
  valueParent: {
    type: String,
    default: "aaa",
  },
});
let emit = defineEmits(["update:valueParent"]);
const changeValue = (event) => {
  console.log(event);
  emit("update:valueParent", event.target.value);
};
</script>
  
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

OS：其实这里我可以开启Minix混入的，不熟练，还是再来一遍。

第二种解决方法 使用mitt插件

先新建一个中转文件 xxxxx.js（随便取名）

import mitt from 'mitt'
const emitter=mitt()
export default emitter
1
2
3

A组件

import emitter from "./xxxx.js";
let strA = ref("这是A组件的数据");
const btn = () => {
  emitter.emit("fn", strA);
};

1
2
3
4
5
6

B组件

import emitter from "./xxxx.js";
let strB = ref("");
onBeforeMount(() => {
  emitter.on("fn", (e) => {
    console.log(e.value);
    strB.value = e.value;
  });
});
1
2
3
4
5
6
7
8

问题3：在vite中配置路由（有些时候并没有默认配置）

1. 在src/routre/router.js文件中（默认这个路径，按照约定来，约定好的规范是最重要的。）

import { createRouter, createWebHistory } from "vue-router"
import Home from "../views/home/index.vue"
console.log(Home)
const routes = [
    {
        path: "/home",
        name: "Home",
        component:Home
    },
    {
        path: "/about",
        name: "About",
        component:()=>import('../views/about/index.vue')
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2. main.js文件中

import { createApp } from 'vue'
import './style.css'
import router from './router/index'
import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount("#app")


1
2
3
4
5
6
7
8
9
10

3. app.vue文件中（一定不要忘记了这个标签）

<div>
//！！！！！！！不然你会看不到界面（同时也要在url导航栏输入对应地址！！！！！）
      <router-view></router-view>
 </div>

1
2
3
4
5

4. OS：路由守卫这个功能根据自己的需求去进行添加