首页 > 其他分享 >vue3中mixin的使用方法

vue3中mixin的使用方法

时间:2024-07-20 10:39:58浏览次数:13  
标签:mData userData const watch mixin vue3 import getData 方法

 

<template>
    <div class="box">
        {{mData.name}}
    </div>
</template>
 
<script setup>
import { ref} from 'vue'
// 导入
import userMix from "@/common/mixins/user";
// 拿到数据
const { mData } = userMix();
console.log(mData)
 
</script>
<style lang="scss" scoped>
</style>

user.js代码

import {
  ref,
  watch,
  onMounted
} from 'vue'
export default function (userData) {
  const mData = ref(null)
  onMounted(() => {
    getData()
  })
  watch(() => data, (newVal, oldVal) => {
    console.log('watch', newVal, oldVal)
  }, {
    deep: true
  })
  const getData = () => {
    if (!userData) {
        mData.value = {
            name: 'lily',
            age: 10
        }
    } else {
        mData.value = userData.value
    }
    
  }
 
  // 暴露出去
  return {
    mData,
    getData
  }
}

 

https://blog.csdn.net/bingjilingvsh2o/article/details/135925874

 

标签:mData,userData,const,watch,mixin,vue3,import,getData,方法
From: https://www.cnblogs.com/xqschool/p/18312829

相关文章

  • Armv8/Armv9架构的学习大纲-学习方法-自学路线-付费学习路线
    本文给大家列出了Arm架构的学习大纲、学习方法、自学路线、付费学习路线。有兴趣的可以关注,希望对您有帮助。ARM64位架构介绍ARM64位架构介绍ARM架构概况,v8-A及其他架构概况ARM架构扩展到v8-A,v8.1A,v8.2-A等版本v8-A介绍和原理支持v7遗留代码AArch32和AArch64状态......
  • 基于Vue CLI 3构建Vue3项目(Vue2也可参考)
    天行健,君子以自强不息;地势坤,君子以厚德载物。每个人都有惰性,但不断学习是好好生活的根本,共勉!文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。蜀国曾闻子规鸟,宣城还见杜鹃花。一叫一回肠一断,三春三月忆三巴。——《宣城见杜鹃花》文章目录使用......
  • Android开发 - inflate方法与创建视图解析
    简介在Android开发过程中,很多地方都不可避免的使用到inflate方法,如在给Fragment进行CreateView(创建视图)时,我们通常是inflater.inflate(R.layout.xxx,container,false)来调用inflate方法的,不难发现,inflate方法的作用是将一个xml布局文件变成一个view对象。注意事项......
  • 3. 中间件的最佳方法
    中间件是ASP.NETCore中最强大的概念之一。对于传统的ASP.NET开发人员来说,“中间件”是一个相对较新的术语。在中间件出现之前,存在HTTP处理程序和模块,需要通过web.config进行单独的代码配置。现在,中间件被视为ASP.NET应用程序中的一等公民,使其更易于在单个代码库......
  • 【Java】同步方法
    文章目录一、总述二、练习三、StringBuffer一、总述刚刚我们已经学习完了同步代码块,就是将一段代码锁起来,这样就可以解决多线程操作共享数据时带来的数据安全问题。但是如果我们想要将一个方法里面所有的代码全部锁起来,此时就没有必要去用同步代码块了,我们可以直接......
  • 7. 基本数据类型的内置方法
    1.列表的内置方法1.1优先掌握的内置方法1.1.1强制类型转换可以将可迭代类型转换为列表类型print(list('messi'))#['m','e','s','s','i']print(list((1,2,3)))#[1,2,3]print(list({4,5,6}))#[4,5,6]list方法在强制转换字典的时候默......
  • 电脑windows7系统环境Framework 4.6.2无法安装的解决方法
    一、错误1、尚未安装.net4.6,无法建立到信任根颁发机构的证书链的错误2、出现错误的原因:在安装Microsoft.NETFramework4.6.2脱机包时提示无法建立到信任根颁发机构的证书链二、解决方法1、实际上是要安装一个根证书MicrosoftRootCertificateAuthority2011.cer2、开始......
  • 插片式远程IO模块:单通道PNP和NPN编码器模块功能和安装方法
     XD系列插片式远程I/O模块是兴达易控技术研发的分布式扩展模块。XD系列成套系统主要由耦合器、各种功能I/O模块、电源辅助模块以及终端模块组成。有多种通讯协议总线的耦合器,例如PROFINET、EtherCAT、Ethernet/IP、CclinkIE以及modbus/TCP等。I/O模块可分为多通道数字量输入模块......
  • Git 的介绍和使用方法
    Git是什么?Git是目前世界上最先进的分布式版本控制系统(类似于同时协作,每个人负责一个模块后上传到分支dev下,负责人审核过后合并到master中)。下载方法和安装直接到官网下载后,默认安装。Git-安装Git打开在桌面按着shift键同时鼠标右键会出现一个OpenGitBashhere单击......
  • Go语言读取文件方法大总结
    前言在Golang中读取文件。我们将使用以下包来处理这些文件。os 包提供了一个独立于平台的接口来执行操作级操作。IOutil 软件包提供了易于使用的实用程序函数来处理文件,而无需了解太多内部实现。bufio 包实现了缓冲IO,这有助于我们提高输入和输出操作的性能和吞吐量。lo......