vue3使用mitt时无法修改数据
vue3使用mitt时无法修改数据 传过来的值无法应用
html内容
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script><!--vue3 使用mitt https://www.npmjs.com/package/mitt#install-->
<title>Document</title>
</head>
<body>
<div id="app">
<h3>购物车</h3>
<product-item></product-item><!--组件1-->
<product-total></product-total><!--引入组件2-->
</div>
<script>
const {createApp,defineAsyncComponent,ref}=Vue
const emitter =mitt()//引入mitt
let app=createApp({
data() {
return {
}
},
components:{
ProductItem:defineAsyncComponent(httpVueLoader("./ProductItem.vue")),//引入组件1
ProductTotal:defineAsyncComponent(httpVueLoader("./ProductTotal.vue"))//引入组件2
}
})
app.mount("#app")
</script>
</body>
</html>
组件1 文件格式为.vue
<template>
<div>
<span>商品名称：苹果，商品个数：{{count}}个</span>
<button @click="countIns">+1</button>
</div>
</template>
<!--组件1内容-->
<script>
module.exports={
data() {
return {
count:0
}
},
setup(props) {
},
methods: {
countIns(){
this.count++
emitter.emit('change', { count:this.count })//mitt触发change 并传值
}
},
}
</script>组件2
<template>
<div>
{{ abc }}
</div>
</template>
<!--组件2内容-->
<script>
module.exports = {
data() {
return {
abc:ref(0)
}
},
methods: {
},
setup(props) {
//mitt注册事件
emitter.on('change', (e)=>{
console.log(this.abc)//打印undefined
this.abc=e.count//无法赋值
})
//教程上是这样用的，但我用好像又有作用域问题，复发给data里的abc赋值e.count
},
}
</script>
关于 LearnKu
粤公网安备 44030502004330号
vue3为什么不使用组合式api写法，感觉是第二个组件出了问题，你两个组件一个在setup里写一个在setup外写。setup里的this指向的是window肯定会是undefined的