vue3.2 setup模式下代码语法糖相关书写

vue3.2以上版本在书写逻辑时跟vue3.0有些不同

1. script setup语法

<script setup lang="ts">
// 书写相关逻辑
</script>

这样就不用像vue3时写下面代码

setup() {
    
    
	return {
    
    
		// 
	}
}

2. props相关应用

若props的值只在相关页面DOM应用

defineProps<{
    
    
  h: string;
}>();

若props的值需要在逻辑里面进行处理，比如监听，计算等，则需要进行定义变量接收

const props = defineProps<{
    
    list: []}>()

// 使用
props.list

若props的值需要定义初始值则：

const props = withDefaults( defineProps<{
    
    name: string,age:number}>(),{
    
     name: '小猴',age:18});

以上用到的withDefaults和defineProps都不需要再vue中进行引入

3. 路由的操作

第一步引入

import {
    
     useRouter } from "vue-router";
const router = useRouter();

获取当前路由

router.currentRoute.value.path

路由拦截

router.beforeEach((to, from, next) => {
    
    
  console.log(to,from)
  if (from.path == "/home") {
    
    
  	//
  }
  next();
});

路由跳转

const goRouter = (): void => {
    
    
  // 跳转不带参数
  router.push("/路由路径");
  // 跳转带参数--方法一
  router.push({
    
     path: "/路由路径", query: {
    
     a: 'XXX' } });
  // 跳转带参数--方法二
  <router-link :to="{ path: '/路由路径', query: {id: 12 } }" ></router-link>
  // 其他页面拿路由参数
  const {
    
     query: params } = router.currentRoute.value;
};

4.vueX相关书写

引入

import {
    
     computed } from "vue";
import {
    
     useStore } from "vuex";
const store = useStore();

获取state

const data= computed(() => store.state.vueX文件名.state中的具体要获取的数据名);

调取mutations方法

store.commit("vueX文件名/mutations方法名");

调取actions中的异步操作方法

const getData = async (data: any) =>
  await store.dispatch("vueX文件名/actions方法名", 参数data);

调取getters中的方法获取其返回值

const time = computed(() => store.getters["vueX文件名/getters中方法名"]);

在vuex中获取其他vuex数据

const {
    
     要获取的vueX文件名 } = this.state;

以上之所以能通过vuex名来获取相关vuex，需要在vuex文件里面配置如下：

export default {
    
    
    namespaced: true,
    state,
    mutations,
    actions,
    getters
};

5.祖孙组件之间传值

import {
    
     ref, provide, inject } from "vue";
// 传
provide("flag", ref(true));
// 获取
const flag = inject("flag") as Ref;

6.emit 事件抛出

简单事件直接抛

// 子组件
<div @click="$emit('delete', row)"></div>
// 父组件
<child @delete="deleteHandle" />
const deleteHandle = (data) => {
    
    
 console.log(data)
}

复杂逻辑

// 子组件
<div @click.stop="editEvent(item)"></div>
const emits = defineEmits<{
    
     (e: "editEvent"): void }>();
const editEvent = (item: object): void => {
    
    
  emits("editEvent", item);
};
// 父组件
<child @editEvent="openModel" />
const openModel = (item: object) => {
    
    
  console.log(item);
};