vue.js - 捕获父组件中子组件发出的事件的值
问题描述
我有一个组件 vue-datetimepicker
具有以下内容:
export default {
name: 'vue-datetimepicker',
data () {
return {
value: ''
}
},
watch: {
options: function (options) {
// update options
$(this.$el).datetimepicker({ data: options })
}
},
mounted: function () {
var vm = this
var mycomp = $(this.$el).datetimepicker({})
mycomp.on('dp.change', function (e) {
vm.value = e.date
vm.$emit('change', vm.value)
})
},
destroyed: function () {
$(this.$el).off().datetimepicker('destroy')
}
}
并从父组件form-preview.vue
我正在努力捕捉它。
created() {
this.$on('change', function(id){
console.log('Event from parent component emitted', id)
});
},
mounted: function() {
},
我期待当我更改日期时间时它应该发出更改事件。但是控制台中没有打印任何内容。
解决方案
this.$on
将监听同一组件发出的事件。要侦听子组件发出的事件,您应该在父组件的模板部分中的子组件上分配一个事件侦听器。所以在你的模板部分form-preview.vue
应该有这样的东西..
<vue-datetimepicker @change="handleChange" ... / >
然后在父组件的脚本部分中,您可以定义您的handleChange
事件处理程序..
methods: {
handleChange(value) {
console.log('Event from child component emitted', value)
}
}
请注意,事件处理程序将自动接收随事件发出的任何数据。如果你想让它明确,你可以使用@change="handleChange($event)"
推荐阅读
- python - 是否可以创建一个透明的 tk 窗口并在其上创建一个非透明的图片,仅使用 tk 和 PIL
- jenkins - WebdriverIo 的 Jenkins 报告插件 - Cucumber
- php - 可选路线停止具有相同模式的其他路线
- c# - 从实体框架中的其他表中排除时间
- java - 声纳和@CheckForNull 的使用
- python - 我正在学习django,当我使用Pinax Likes时,出现405错误
- reactjs - 如何更新子组件中的父状态并将其传递回父状态?
- javascript - Webpack 无法解析自定义定义文件的模块
- mongodb - 如何获取元素的计数它为空的次数以及同一元素的计数它在mongodb中非空的次数?
- php - 如何在 Laravel 中制作 Product - Variation 关系