目录 一、背景 二、vue3语法的使用 2.1. 父子通信props 2.2. EventBus 2.3. 计算属性computed 2.4. pinia状态管理器的使用 2.4.1. 模块化 2.4.2. 使用方法 2.5. watch监听器 2.6. 全局函数/变量注册 三、总结
目录
- 一、背景
- 二、vue3语法的使用
- 2.1. 父子通信props
- 2.2. EventBus
- 2.3. 计算属性computed
- 2.4. pinia状态管理器的使用
- 2.4.1. 模块化
- 2.4.2. 使用方法
- 2.5. watch监听器
- 2.6. 全局函数/变量注册
- 三、总结
一、背景
最近工作了比较忙,比较少写文章;最近做的开源项目,由于vue-cli
和vuex
要逐渐不维护了,因此需要对技术栈进行升级;目前所使用的最新技术栈是:vue3 + vite + element-plus + axios + pinia + mitt + echarts
;
其中:
vite
是vue
团队最新推出的脚手架,相比vue-cli
来说速度更快,依赖更少;element-plus
则是适配于vue3
和vite
的UI
框架;pinia
是vuex
的替代版本,它取消了mutations
,语法上比原来的vuex
更加简洁;mitt
主要用来做EventBus
的功能,因为vue3
取消了this
指针,所以很多插件都是需要手动导入的,下文会介绍。
本文主要记录在代码重构过程中对vue3
新语法特性的学习使用,并且使用的是setup
语法糖的语法特性。
二、vue3语法的使用
2.1. 父子通信props
子组件:
<script setup> // 父传子 defineProps({ value: { type: Number, default: 1 } }) // 子传父 const emit = defineEmits(['change', 'setValue']) // 模板绑定的监听函数 function changeValue(val) { emit('change', val) } function changeSet(val) { emit('setValue', val) } </script>
父组件:
// 父组件的使用方法和vue2相同 <child :value="value" @change="change" @setValue="setValue"></child>
2.2. EventBus
注意:需要自行安装mitt
npm i mitt
mian.js
文件
// main.js import mitt from 'mitt' app.config.globalProperties.mittBus = new mitt()
组件中使用
<script setup> import { getCurrentInstance } from "@vue/runtime-core" const $bus = getCurrentInstance().appContext.config.globalProperties.$bus $bus.$emit('change', value) $bus.$on('change', (val) => { console.log(val) }) </script>
2.3. 计算属性computed
由于vue3
中没有this
指针,因此使用计算属性需要自己自行导入
<script setup> import { computed } from '@vue/runtime-core' const value = computed(() => { return 1 + 1 }) </script>
2.4. pinia状态管理器的使用
2.4.1. 模块化
在安装pinia
后,在目录stores
下新建index.js
文件,作为模块化的入口文件。index.js
文件
// 引入模块文件 import aside from './aside' import header from './header' import menuState from './menuState' import tags from './tags' export default function stores() { return { aside: aside(), header: header(), menuState: menuState(), tags: tags() } }
在同目录下新建模块文件,如menuState
文件:
// menuState import { defineStore } from "pinia" export default defineStore('menuState', { state() { return { showRightMenu: false, left: 0, top: 0, rightMenuList: [] } }, actions: { changeShowRightMenu(val) { this.showRightMenu = val }, changeLeft(val) { this.left = val }, changeTop(val) { this.top = val }, changeRightMenuList(val) { this.rightMenuList = val } } })
2.4.2. 使用方法
pinia
的使用方法比较简便,在组件中导入后,模块可以直接引用,也可以使用计算属性使用;同时,actions
中的方法也可以直接调用,无需使用以往的mapState
等方式。如下所示:
<script setup> import stores from '@/stores/index' import { computed } from '@vue/runtime-core' // 解构出menuState const { menuState } from stores() // 使用计算属性获取status const showRightMenu = computed(() => { return menuState.showRightMenu }) // 调用方法,可直接调用 menuState.changeLeft(12) </script> <template> <!-- 也可以直接在模板中使用 --> <div> {{menuState.top}} </div> </template>
2.5. watch监听器
watch
监听器的使用比较简单,并不需要导入,直接使用即可。
<script setup> // dataSources是被监听的变量 watch(() => dataSources, () => { console.log(dataSources) }) </script>
2.6. 全局函数/变量注册
细心的读者可能发现了,mitt
就是一个全局注册的一个函数;同理,我们在定义一些全局函数或者变量时,也是使用这种方法。
// main.js // 注册element-plus的一个消息提示 import { ElMessage } from 'element-plus' app.config.globalProperties.$message.success = () => { ElMessage({ message: "OK", type: 'success' }) }
组件中使用:
<script setup> import { getCurrentInstance } from "@vue/runtime-core"; const $message.success = getCurrentInstance().appContext.config.globalProperties.$message.success $message.success() </script>
三、总结
本文主要是记录vue3
的setup
语法糖的各种新语法的使用方法,之后有空再写篇不使用setup
语法糖的语法使用。
到此这篇关于vue3 setup语法糖各种语法新特性的使用(vue3+vite+pinia)的文章就介绍到这了,更多相关vue3 setup语法糖内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络!