vue3 setup标签使用总结

引入element-plus

	在main.js中引用并且使用中文 顺便引入图标库

const app = createApp(App); // 生成的vue实例 已经存在不需要重复创建
...
import ElementPlus from "element-plus";
import zhCn from "element-plus/dist/locale/zh-cn.mjs"; // 中文
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// 使用icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component);
}
app.use(ElementPlus, {locale: zhCn,
}); // 使用element-plus

引入vuex

在sotre文件夹中创建index.js 以及其他的 moudle

import { createStore } from "vuex";
import app from "./moudle/app.js";export default createStore({modules: {app,},state() {return {test: 111,};},
});

其中 moudle/app.js

const app = {state: {flag: false,},getters: {getFlag(state) {return state.flag}},mutations: {setFlag: (state, payload) => {state.flag = payload}},actions: {// 是否展开左侧导航条test({commit}, payload) {return new Promise(resolve => {commit('setFlag', payload)resolve(true)})}}
}export default app

main.js中引入

const app = createApp(App); // 生成的vue实例 已经存在不需要重复创建
...
import store from './store/index'
app.use(store);

在其他页面使用

<script setup>import sideBarItem from "./sideBarItem.vue";import { reactive, computed } from "vue";import { useRoute } from "vue-router";const router = useRoute();import store from '@/store/index'const self = reactive({});const flag = computed(() => {return store.getters.getFlag;});const changeFlag = () => {store.dispatch("test", true);};
</script>

使用props

子组件：

<script setup>
import { defineProps, reactive } from "vue"; // 文档上面写着不需要引入 但是控制台有警告 所以干脆就引入了const props = defineProps({title: {type: String,default: "",},showIcon: {type: Boolean,default: true,},
});const self = reactive({showContent: true,
});const handleDisplay = () => {self.showContent = !self.showContent;
};
</script>

具体使用：

<template><div class="test"><card title="test" :showIcon="false"></card></div>
</template><script setup>
import card from "@/components/card.vue";</script>

定义emit事件

子组件：

<template><div @click="handleClick(1)">emit事件</div>
</template><script setup>
import { defineEmits } from "vue";const emit = defineEmits(["emitClick",
]);const handleClick = (index) => {emit("emitClick", index;
}</script>

使用：

<template><div class="test">2<card @emitClick="handleClick"></card></div>
</template><script setup>
import card from "@/components/card.vue";const handleClick = (index) => {console.log('index', index)
}
</script>

使用watch监听props

大部分监听还是差不多意思这个稍微绕了点

<script setup>
import { watch, defineProps } from "vue";const props = defineProps({item: {type: Object,required: true,},
});// 监听 props 需要使用函数的方式进行返回 
watch(() => props.item, (newValue, oldValue) => {...
})
</script>

computed 计算函数

<script setup>
import { computed } from "vue";
import store from '@/store/index'const keepRouterList = computed(() => {return store.getters.getKeepRouters;
});
</script>

refs 使用

其实习惯了之后感觉这个改动还行能接受

<template><div><el-form ref="loginForm" class="login-form"></el-form></div>
</template><script setup>
import { reactive, ref } from 'vue'
const loginForm = ref(null) // 变量名是ref的名字 ref的初始值是nullconst self = reactive({...
})const submitForm = async () => {loginForm.value.validate((valid) => {if (valid) {    ...} else {console.log('error submit!!')return false;}})
}
const resetForm = () => {loginForm.value.resetFields();
}
</script><style scoped>
</style>