Vue3 语法示例

参考博客：带你看懂vue3中最重要的API——ref和reactive

依赖包版本如下

    "ant-design-vue": "^3.2.20",
    "core-js": "^3.8.3",
    "mitt": "^3.0.0",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"

setup语法糖

Test.vue

<template>
    <div class="home">
        <div style="border: 1px solid #ff0000">
            <CompA msg="test" @printNum="printNum"></CompA>
        </div>
        <div style="border: 1px solid #00ff00">
            <CompB></CompB>
        </div>

        <UseMouse></UseMouse>
    </div>
</template>

// setup
import { onMounted } from "vue";
import CompA from "@/components/CompA.vue";
import CompB from "@/components/CompB.vue";
import UseMouse from "@/components/UseMouse.vue";

onMounted(() => {
    console.log("Test组件onMounted生命周期");
});

const printNum = (num) => {
    alert(num);
};

CompA.vue

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <h1>{{ name }}</h1>
        <h1>{{ num }}</h1>
        <a-button type="primary" @click="printNum">向父组件发送事件</a-button>
        <a-button type="primary" @click="printNum2">向兄弟组件发送事件</a-button>
    </div>
</template>

// setup
import { onMounted, defineProps, defineEmits, computed } from "vue";
import mitt from "@/assets/mitt/mitt";

onMounted(() => {
    console.log("CompA组件onMounted生命周期");
});

// defineProps 定义父组件传递的props
const props = defineProps({
    msg: String,
    name: {
        type: String,
        require: false,
        default: "aaa",
    },
});

// computed 计算属性
const num = computed(() => {
    return props.msg + props.name;
});

// defineEmits 定义要发射给父组件的事件
const emits = defineEmits(["printNum"]);
const printNum = () => {
    emits("printNum", "父" + Math.random());
};

// mitt 兄弟组件之间事件传值
const printNum2 = () => {
    mitt.emit("printNum2", "兄弟" + Math.random());
};

CompB.vue

<template>
    <div class="hello">
        <h1>CompB</h1>
    </div>
</template>

// setup
import { onMounted, defineProps, defineEmits } from "vue";
import mitt from "@/assets/mitt/mitt";

onMounted(() => {
    console.log("CompB组件onMounted生命周期");
    mitt.on("printNum2", (data) => {
        alert(data);
    });
});

组合式API语法

Test2.vue

<template>
    <div class="home">
        <div style="border: 1px solid #ff0000">
            <CompA2 msg="test2" @printNum="printNum"></CompA2>
        </div>
        <div style="border: 1px solid #00ff00">
            <CompB2></CompB2>
        </div>

        <UseMouse></UseMouse>
    </div>
</template>

import { defineComponent, onMounted } from "vue";
import CompA2 from "@/components/CompA2.vue";
import CompB2 from "@/components/CompB2.vue";
import UseMouse from "@/components/UseMouse.vue";

export default defineComponent({
    name: "Test2",
    components: { CompA2, CompB2, UseMouse },
    setup() {
        onMounted(() => {
            console.log("CompA2组件onMounted生命周期");
        });

        onMounted(() => {
            console.log("Test组件onMounted生命周期");
        });

        const printNum = (num) => {
            alert(num);
        };

        return {
            printNum
        };
    },
});

CompA2.vue

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <h1>{{ name }}</h1>
        <h1>{{ num }}</h1>
        <h1>{{ num2 }}</h1>
        <a-button type="primary" @click="changeNum2">改变num2</a-button>
        <a-button type="primary" @click="printNum">向父组件发送事件</a-button>
        <a-button type="primary" @click="printNum2">向兄弟组件发送事件</a-button>
    </div>
</template>

import { onMounted, defineComponent, computed, watch, ref } from "vue";
import mitt from "@/assets/mitt/mitt";

export default defineComponent({
    name: "CompA2",
    components: {},
    props: {
        msg: String,
        name: {
            type: String,
            require: false,
            default: "aaa2",
        },
    },
    emits: ["printNum"],
    setup(props, ctx) {
        console.log(props);

        onMounted(() => {
            console.log("CompA2组件onMounted生命周期");
        });

        // computed 计算属性
        const num = computed(() => {
            return props.msg + props.name;
        });

        // emit 父子之间传值
        const printNum = () => {
            ctx.emit("printNum", "父2-" + Math.random());
        };

        // mitt 兄弟组件之间事件传值
        const printNum2 = () => {
            mitt.emit("printNum2", "兄弟2-" + Math.random());
        };

        // watch 数据监听(https://blog.csdn.net/weixin_42349568/article/details/126760186)
        const num2 = ref(10);
        const changeNum2 = () => {
            num2.value += 1;
        };
        watch(num2,(newVal, oldVal) => {
                console.log(newVal, oldVal);
            },
            {
                deep: true,
                immediate: false,
                flush: 'pre'
            }
        );

        return {
            num,
            num2,
            printNum,
            printNum2,
            changeNum2,
        };
    },
});

CompB2.vue

<template>
    <div class="hello">
        <h1>CompB2</h1>
    </div>
</template>

import { onMounted, defineComponent } from "vue";
import mitt from "@/assets/mitt/mitt";

export default defineComponent({
    name: "CompB2",
    components: {},
    props: {},
    setup(props) {
        console.log(props);

        onMounted(() => {
            console.log("CompB2组件onMounted生命周期");
            mitt.on("printNum2", (data) => {
                alert(data);
            });
        });

        return {};
    },
});

Vue事件中心

mitt.js

// Vue事件中心
import mitt from "mitt";
export default new mitt();