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>