【Vue3】Mixin

setup写法

新建一个js文件mixin.js

import {ref} from 'vue'
export default function(){
   //定义变量
   let num = ref(1)
   //定义方法
   let favBtn = ()=>{
      num.value += 1
   }
   //把内容返回出去
   return{
      num,
      favBtn
   }
}

Vue中引入Mixin

<template>
   <div>
      <p>这是A组件</p>
      <span>{{num}}</span>
      <button @click="favBtn">+1</button>
   </div>
</template>
<script setup>
   import mixin from '../mixin/minx'
   //解构mixin.js中的数据
   let { num,favBtn } = mixin()
</script>

或者

<template>
   <div>
      <p>这是A组件</p>
      <span>{{fav_vue.num}}</span>
      <button @click="fav_vue.favBtn">+1</button>
   </div>
</template>
<script>
   import fav from '../mixin/minx'
   export default{
      data(){
         return{
            fav_vue :fav()
         }
      },
   }
</script>

选项式API写法

mixin.js

export const fav = {
   data(){
      return{
         num:1
      }
   },
   methods:{
      favBtn(){
         this.num += 1
      }
   }
}

Vue

<template>
   <div>
      <p>这是A组件</p>
      <span>{{num}}</span>
      <button @click="favBtn">+1</button>
   </div>
</template>
<script>
   import {fav} from '../mixin/minx'
   export default{
      data(){
         return{
         }
      },
      mixins:[fav],
   }
</script>