vue3使用mixins

发布时间:2023年12月25日
<template>
  <div>{{ num }}___{{ fav }}</div>
  <button @click="favBtn">改变值</button>
</template>

<script setup lang="ts">
import mixin from "../mixins/mixin";
let { num, fav, favBtn } = mixin();
defineExpose({ num, fav, favBtn });
</script>

<style></style>
../mixins/mixin.ts:
import { ref } from "vue";
export default function() {
    let num = ref(1);
    let fav = ref(false);
    let favBtn = () => {
        num.value += 1;
        fav.value = true;
        setTimeout(() => {
            fav.value = false;
        }, 2000)
    }

    return {
        num,
        fav,
        favBtn
    }
}

效果图:
在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_45932157/article/details/135209072
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。