javascript - 为什么组件不会响应自定义事件?
问题描述
我在 Main2.vue 中发出一个名为emit-event-main2-counter的事件
为什么Bottom.vue中的数据cntr不会更新?
应用程序.vue
<template>
<div class="app">
<Main2 />
<Bottom/>
</div>
</template>
<script>
import Main2 from "./components/Main2";
import Bottom from "./components/Bottom";
export default {
components: {
Main2,
Bottom
},
}
</script>
<style scoped>
h1 {
color: red;
}
</style>
Main2.vue
<template>
<div>
main2 template <span class="text1">{{message}}</span>
<button type="button" v-on:click="btnClickButton">my click</button>
<div>{{counter}}</div>
</div>
</template>
<script>
import appInput from "./appInput.vue";
export default {
data: () => {
return {
message: "theText",
counter: 0,
}
},
components: {
appInput,
},
methods: {
btnClickButton(e) {
this.$root.$emit('emit-event-main2-counter', this.counter)
console.log('button');
this.counter +=1;
}
}
}
</script>
<style scoped>
.text1 {
color:red;
}
.text2 {
color:blue;
}
</style>
底部.vue
<template>
<div class="Bottom" v-on:emit-event-main2-counter="cntr = $event">
bottom text and cntr ({{cntr}})
</div>
</template>
<script>
export default {
data: () => {
return {
cntr: 0
}
},
}
</script>
<style scoped>
</style>
解决方案
Main2
您可以从作为参数向父级发出一个事件,this.counter
并在父级中接收该事件并将其传递props
给Bottom
在Main2
:
this.$emit("emit-event-main2-counter",this.counter);
在parent
组件中:
<template>
<Main2 v-on:emit-event-main2-counter="sendToBottom"/>
<Bottom :cntr="pcounter"/>
....
</template>
data:{
pcounter:0
},
methods:{
sendToBottom(c){
this.pcounter=c
}
}
Bottom
应该有属性称为cntr
props:["cntr"]
底部.vue
<template>
<div class="Bottom" >
bottom text and cntr ({{cntr}})
</div>
</template>
<script>
export default {
props:["cntr"],
data: () => {
return {
}
},
}
</script>
推荐阅读
- r - “NAMESPACE”文件中的指令“import”中的空名称
- javascript - 使用项目分数对对象数组进行排序
- python - 重塑数组后keras中的索引错误
- java - 无法将 Char 和 Int HashMap 转换为字符串
- python - 为什么我在 WiSe 数据集中使用 DeepLab v3+ 得到完全零预测,即使损失不断减少?
- javascript - elasticsearch中按文档划分的子文档字段的平均值
- javascript - Javascript 不区分大小写的词频计数器
- c - 有人可以解释这两个 for 循环之间的区别吗?
- html - 添加打字机效果的反转?
- c# - 多维数组、可为空的引用类型和类型转换