vue3之“mixin”

test.ts 方式一

import {ref} from "vue";
export default function getHomeMixin(source: string) {
    let name = ref('张三');
    const componentName = source
    const check = (transmitName: string) => {
        name.value = transmitName
    }
    return {
        name,
        componentName,
        check
    }
}

test.vue

<template>
  <div class="home">
  {{Mixin.name}}
    <el-button @click="Mixin.check('123')">test</el-button>
  </div>
</template>
<script setup lang="ts">
  import getHomeMixin from '@/components/mixins/test'
  const Mixin = getHomeMixin('我是A组件传的值');
</script>

test.ts 方式二

import {ref} from "vue";
export default function (){
    let name = ref('张三');
    const check = (transmitName: string) => {
        name.value = transmitName
    }
    return {
        name,
        check
    }
}

test.vue

<template>
  <div class="home">
  {{name}}
    <el-button @click="check('123')">test</el-button>
  </div>
</template>
<script setup lang="ts">
  import useMixin from '@/components/mixins/test'
  const {name,check}  = useMixin();
</script>

推荐这位老哥的文章讲的更好