在父组件的input 中触发this.$emit('selected', data, this.sourceRow);
时间: 2024-04-24 10:23:09 浏览: 106
如果你想在父组件的`input`中触发`this.$emit('selected', data, this.sourceRow)`事件,你可以使用`@input`事件监听器来捕获输入框的变化,并在事件处理程序中触发自定义事件。
下面是一个示例:
```html
<template>
<div>
<h1>Parent Component</h1>
<Child @selected="handleSelected"></Child>
<input type="text" v-model="inputValue" @input="triggerSelectedEvent" />
</div>
</template>
<script>
import Child from './Child.vue';
export default {
name: 'Parent',
components: {
Child
},
data() {
return {
inputValue: ''
};
},
methods: {
triggerSelectedEvent() {
this.$emit('selected', this.inputValue, this.sourceRow);
},
handleSelected(data, sourceRow) {
// 在这里处理选中事件
console.log('Selected data:', data);
console.log('Source row:', sourceRow);
}
}
};
</script>
```
在上述代码中,我们在父组件的`input`元素上添加了`@input`事件监听器,当输入框的值发生变化时会触发该事件。
在事件处理程序`triggerSelectedEvent`中,我们通过`this.$emit('selected', this.inputValue, this.sourceRow)`触发了名为`selected`的自定义事件,并传递了`this.inputValue`和`this.sourceRow`作为参数。
同时,我们还定义了父组件的`handleSelected`方法来处理选中事件,可以在该方法中对选中的数据进行相应的操作。
这样,当父组件的`input`输入框的值发生变化时,会触发`this.$emit('selected', data, this.sourceRow)`事件,从而执行父组件中的`handleSelected`方法,并处理选中事件。
阅读全文