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

最新推荐文章于 2023-02-21 17:51:32 发布

xiaofiy

最新推荐文章于 2023-02-21 17:51:32 发布

阅读量302

点赞数 1

文章标签： vue setup vue3.2 vue3

本文链接：https://blog.csdn.net/xiaofiy/article/details/124273548

版权

本文概述了Vue3.2版本在scriptsetup语法、props处理、路由操作、Vuex使用、组件间通信和事件管理方面的变化，帮助开发者快速适应新环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
};