javascript - v-on :change. Native 未绑定(bind)在父组件 : Vue. js 中

Question

我有一个带有复选框输入的组件:

<template>
    <input id='one' type='checkbox' v-on:change.native="$emit('change')" />
</template>

我在另一个组件中使用此组件:

<template>
....
    <Checkbox v-on:change="change" />
....
</template>
<script>
    import Checkbox from './components/Checkbox.vue'

    export default {
        components: {
            Checkbox
        },
        methods: {
            change: function (e) { 
                console.log(e);
        },
    }
</script>

我想要的是附加父组件方法，它必须指向子组件事件。 问题是当复选框更改时，此 change 事件不会触发。

Answer 1

您需要使用复选框的 input 事件。我还建议使用 v-on="$listeners"除非您确实需要将事件命名为 'change'。

Checkbox.vue

<template>
  <input
    type="checkbox"
    v-on="$listeners"
  >
</template>

index.vue

<template>
  <Checkbox @input="input" />
</template>

<script>
import Checkbox from '~/components/Checkbox.vue';

export default {
  components: {
    Checkbox,
  },
  methods: {
    input(e) {
      console.log(e);
    },
  },
};
</script>