将 Vue 组件绑定到 vue 实例

Question

我这里有 Vue 组件     Vue.component('number-input', {        props: {},        template: `<textarea class="handsontableInput subtxt area-custom text-center text-bold" v-model="displayValue" @blur="isInputActive = false" @focus="isInputActive = true"></textarea>`,        data: function() {            return {                isInputActive: false            }        },        computed: {            displayValue: {                get: function() {                    if (this.isInputActive) {                         return this.value.toString()                    } else {                         return this.value.toFixed(0).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")                    }                },                set: function(modifiedValue) {                     let newValue = parseFloat(modifiedValue.replace(/[^\d\.]/g, ""))                     if (isNaN(newValue)) {                        newValue = 0                    }                     this.$emit('input', newValue)                }            }        }    })并change在 vue 实例上具有如下方法var content_kalkulasi = new Vue({el: '#kalkulasi-table',data: {    arr: [{id:'',name:'',file:'',satuan: 0,sub: 0}],    total: 0,    index_upload: 0}, methods:{    add(){        arr = {}        arr.id = ''        arr.name = ''        arr.file = ''        arr.satuan = 0        arr.sub = 0        this.arr.push(arr)    },    change(){        this.total = 0        for(x in this.arr){            this.total += this.arr[x].satuan * this.arr[x].sub         }        console.log(this.total)    },我想change从这个 html触发方法<number-input style="" v-model="data.sub" v-on:keyup="change"></number-input> 但v-on:keyup="change"不会触发。我如何v-on:keyup="change"从 vue 组件调用方法？谢谢

Answer 1

这是因为您的组件没有触发keyup事件。

更改v-on:keyup="change"为v-on:input="change"

或者在您的组件中将此添加到 textarea ： @keyup="$emit('keyup')"