vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)

<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>

npm i mitt

// 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>

<script setup>
import { computed } from '@vue/runtime-core'

const value = computed(() => {
	return 1 + 1
})
</script>

// 引入模块文件
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
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
        }
    }
})

<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>

<script setup>
// dataSources是被监听的变量
watch(() => dataSources, () => {
	console.log(dataSources)
})
</script>

// 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>