vue3使用mixins

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

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

相关推荐

  1. Vue mixins详解

    2023-12-26 03:52:02       52 阅读
  2. Vue面试之Mixins

    2023-12-26 03:52:02       52 阅读
  3. VUE——mixins混入

    2023-12-26 03:52:02       42 阅读
  4. vue2 mixins混入

    2023-12-26 03:52:02       41 阅读
  5. Vue基础——Mixin(混入)

    2023-12-26 03:52:02       35 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-26 03:52:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-26 03:52:02       101 阅读
  3. 在Django里面运行非项目文件

    2023-12-26 03:52:02       82 阅读
  4. Python语言-面向对象

    2023-12-26 03:52:02       91 阅读

热门阅读

  1. 单挑力扣(LeetCode)SQL题:1303. 求团队人数

    2023-12-26 03:52:02       52 阅读
  2. c语言常用函数源码示例

    2023-12-26 03:52:02       55 阅读
  3. Windows Error #2000

    2023-12-26 03:52:02       63 阅读
  4. map和set

    map和set

    2023-12-26 03:52:02      57 阅读
  5. [沫忘录]mysql基础(函数及约束)

    2023-12-26 03:52:02       51 阅读
  6. 前端八股文(js篇)

    2023-12-26 03:52:02       53 阅读
  7. SpringBoot中@PostConstruct注解作用

    2023-12-26 03:52:02       55 阅读
  8. yolov5知识蒸馏

    2023-12-26 03:52:02       46 阅读