vue3中mixin的使用方法

小小强学习网發表於2024-07-20
Vue

<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

相關文章