vue3 + vite + ts 學習筆記

1、使用element-plus時默認的語言是英文，如何將其設置為中文，使用 el-config-provider 來進行配置

// app.vue
<template>
  <el-config-provider :locale="locale">
    <router-view></router-view>
  </el-config-provider>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
import { ElConfigProvider } from "element-plus";

import zhCn from "element-plus/lib/locale/lang/zh-cn";

export default defineComponent({
  name: "App",
  components: {
    HelloWorld,
    [ElConfigProvider.name]: ElConfigProvider,
  },
  data() {
    return {
      locale: zhCn,
    };
  },
});
</script>

同時還需要再vite.config.ts文件中引入對應的中文語言包

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
import viteCompression from 'vite-plugin-compression';

const pathResolve = (dir: string): any => {
  return resolve(__dirname, '.', dir);
};

const alias: Record<string, string> = {
  '@': pathResolve('src/'),
};
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz'
    })],
  root: process.cwd(),
  resolve: { alias },
  optimizeDeps: {
    include: ['element-plus/lib/locale/lang/zh-cn', 'element-plus/lib/locale/lang/en', 'element-plus/lib/locale/lang/zh-tw'],
  }
})

2、父子組件之間如何通過emit來進行參數的傳遞

// 子組件testModel
<template>
  <div>
    <el-input v-model="inputvalue" clearable @change="change"></el-input>
    <el-button type="primary" @click="changeTitle">change-title</el-button>
    子組件的值-{{inputvalue}}
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    title: { type: [String, Number], default: "" },
  },
  emits: ["update:title"],
  setup(prop, context) {
    const change = (val: String) => {
      context.emit("update:title", val);
    };

    const inputvalue = ref<string | number>(prop.title);

    const changeTitle = () => {
      var data = Math.random() * 10;
      inputvalue.value = data;
      context.emit("update:title", data);
    };return { change, changeTitle, inputvalue };
  },
});
</script>
// 父組件
<testModel v-model:title="modeltitle"></testModel>
  父組件渲染出來的值：{{modeltitle}}
<script lang="ts">
import { ref, defineComponent } from "vue";
import testModel from "./testModel.vue";
export default defineComponent({
  name: "HelloWorld",
  components: {
    testModel,
  },
  setup: () => {
    const modeltitle = ref("123456789");
    return { modeltitle };
  },
});
</script>

父組件通過prop傳遞title給子組件，子組件通過變量inputvalue來接收title的值，並通過v-model="inputvalue"進行綁定；子組件inputvalue值變更后直接通過context.emit("update:title", val)來直接變更父組件title的值。

使用context.emit("update:title", val)時，需要在emits里面定義emit的方法名，例如 emits: ["update:title"]。

父組件通過 <testModel v-model:title="modeltitle"></testModel> 就直接渲染了更新后的值，即modeltitle為子組件更新后傳遞過來的值。

3、父子組件之間傳參如果使用默認的modelValue來處理，即不像上面說的傳遞title,默認為modelValue屬性

// 子組件 testModel1.vue
<template>
  <div>
    <el-input v-model="inputvalue" clearable @change="change"></el-input>
    <el-button type="primary" @click="changeTitle">change-modelValue</el-button>
    {{inputvalue}}
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    modelValue: {
      type: [String, Number],
      default: "",
    },
  },
  emits: ["update:modelValue"],
  setup(prop, context) {
    const change = (val: String) => {
      context.emit("update:modelValue", val);
    };

    const inputvalue = ref<string | number>(prop.modelValue);

    const changeTitle = () => {
      var data = Math.random() * 10;
      inputvalue.value = data;
      context.emit("update:modelValue", data);
    };

    return { change, changeTitle, inputvalue };
  },
});
</script>
// 父組件
<testModel1 v-model="modelValue"></testModel1>
  父組件渲染出來的值：{{modelValue}}
<script lang="ts">
import { ref, defineComponent } from "vue";
import testModel1 from "./testModel1.vue";
export default defineComponent({
  name: "HelloWorld",
  components: {
    testModel1,
  },
  setup: () => {
    const modelValue = ref("modelValue");
    return { modelValue };
});
</script>

父組件通過prop傳遞modelValue給子組件，子組件通過變量inputvalue來接收title的值，並通過v-model="inputvalue"進行綁定；子組件inputvalue值變更后直接通過context.emit("update:modelValue", val)來直接變更父組件modelValue的值。

父組件通過 <testModel1 v-model="modelValue"></testModel1> 就直接渲染了更新后的值，即modelValue為子組件更新后傳遞過來的值。

與上面寫法相比少寫了v-model:title

4、如何使用事件總線evenbus

vue3中不再支持emit.on(),emit.off()等方式，可以使用mitt進行替代。

安裝方式為：yarn add mitt

安裝成功后在main.ts文件中進行引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue'
import router from "./router/index"
import { store, key } from './store';
import mitt from "mitt"
import '@/styles/var.scss'

const app = createApp(App)
app.config.globalProperties.$bus = mitt();
app.use(ElementPlus, { size: "small" }).use(router).use(store, key)
app.mount('#app')

如何使用：

首先自定義一個hook方法 useCurrentInstance，否則在使用過程中會有ts報錯的提示

// useCurrentInstance.ts
import { ComponentInternalInstance, getCurrentInstance } from "vue"

export default function useCurrentInstance() {
  const { appContext } = getCurrentInstance() as ComponentInternalInstance;
  const proxy = appContext.config.globalProperties;
  return {
    proxy
  }
}

使用自定義的hook方法來傳遞數據

<template>
  <div>

  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";

export default defineComponent({
  setup() {
    const { proxy } = useCurrentInstance();
    proxy.$bus.emit("mymitt", "這是mitt傳到home的事件總線");
    return {};
  },
});
</script>

使用自定義的hook方法來接收數據

<script lang="ts">
import {
  defineComponent,
  computed,
  ref,
} from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import mitt from "@/components/mitt.vue";

export default defineComponent({
  name: "home",
  components: {
    mitt,
  },
  setup() {
    const { proxy } = useCurrentInstance();
    const mittvalue = ref(null);
    proxy.$bus.on("mymitt", (val: any) => {
      mittvalue.value = val;
    });return { mittvalue };
  },
});
</script>