vue3使用mixins

最新推荐文章于 2024-07-16 10:44:22 发布

你的美，让我痴迷

最新推荐文章于 2024-07-16 10:44:22 发布

阅读量954

点赞数 8

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45932157/article/details/135209072

版权

这篇文章介绍了在Vue中使用模板和`ref`属性创建一个简单的组件，展示如何管理组件内部的状态（数字和布尔值），以及利用setTimeout实现状态的定时切换。

摘要由CSDN通过智能技术生成

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