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>