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"]。

父元件通過<testModelv-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>