vue中v-model双向绑定 teacher.vue需要监听student.vue的 一个举手(hand)动作,当举手动作触发了.vue就需要打印一句话:“你来回答”
时间: 2024-05-08 15:20:22 浏览: 119
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
好的,我来回答您的问题。在Vue中,可以使用自定义事件来监听子组件的动作。首先,在student.vue中添加一个自定义事件,代码如下:
```
<template>
<button @click="handUp">举手</button>
</template>
<script>
export default {
methods: {
handUp() {
this.$emit('hand-up')
}
}
}
</script>
```
接着,在teacher.vue中监听子组件的hand-up事件,并在事件处理函数中打印出需要的话。代码如下:
```
<template>
<div>
<student @hand-up="handleHandUp"></student>
<p v-if="showMessage">{{ message }}</p>
</div>
</template>
<script>
import Student from './student.vue'
export default {
components: {
Student
},
data() {
return {
showMessage: false,
message: ''
}
},
methods: {
handleHandUp() {
this.showMessage = true
this.message = '你来回答'
}
}
}
</script>
```
这样,当在student.vue中点击举手按钮时,就会触发hand-up事件,在teacher.vue中监听到该事件并执行相应的逻辑,最后将需要打印的话显示在页面上。
阅读全文