一、mixin是什么?
mixin是用来分发组件中可复用的功能
二、mixin使用步骤
1.创建mixin.js文件
里面写可复用组件的功能
代码如下(示例):
import {ref} from 'vue'
export default function(){
let num = ref(100)
let fav = ref(false)
const btnFav = () =>{
num.value += 1
fav.value = true
setTimeout(() => {
fav.value = false
}, 2000);
}
return {
num,
fav,
btnFav
}
}
2.在组件中引用
代码如下(A页面):
<template>
<div>
我是A页面
{{num}}
<button @click="btnFav">加一</button>
</div>
</template>
<script setup>
import mixin from '../mixins/mixin.js'
let {num,btnFav} = mixin()
</script>
代码如下(B页面):
<template>
<div>
我是B页面
{{num}}
<button @click="btnFav">加一</button>
</div>
</template>
<script setup>
import mixin from '../mixins/mixin.js'
let {num,btnFav} = mixin()
</script>
代码如下(父组件):
<template>
<common-a></common-a>
<common-b></common-b>
</template>
<script setup>
import CommonA from '../components/CommonA.vue'
import CommonB from '../components/CommonB.vue'
</script>
页面展示:
我们不断点击加一这个功能时,我们发现两个组件状态值不会共享,这也导致我们功能的复用。
三、Provide和Inject
Provide:提供状态值(可以多级传递)
Inject:接受组件传递的状态值
代码如下(父组件):
<template>
<common-a></common-a>
</template>
<script setup>
import CommonA from '../components/CommonA.vue'
let num = ref(999)
provide("changeNum",num)
</script>
代码如下(子组件):
<template>
<div>
我是A页面
{{anum}}
</div>
</template>
<script setup>
const anum = inject("changeNum")
</script >
页面可以显示其他组件传递的值,他的值是共享的,一个页面修改则,所有页面的值都将发生改变。它比vuex好在起始状态清晰