v-on: change.native не привязывается в родительском компоненте: 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

Модификатор .native используется на компонентах , а не на собственных виджетах.

Могут быть случаи, когда вы хотите слушать напрямуюродное событие в корневом элементе компонента.В этих случаях вы можете использовать модификатор .native для v-on

. Вы можете использовать .native во внешней привязке, чтобы перехватить событие change, всплывающее изнутри (поскольку обычно собственные событияпузыря, в то время как события Vue этого не делают), или вы можете использовать не-.native события как во внутреннем, так и во внешнем компонентах, чтобы создавать свои собственные пузыри.

Фрагмент ниже делает оба:

new Vue({
  el: '#app',
  methods: {
    change() {
      console.log("Native change");
    },
    change2() {
      console.log("Non-native");
    }
  },
  components: {
    myCheckbox: {
      template: '#inner-template'
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<template id="inner-template">
    <input id='one' type='checkbox' v-on:change="$emit('change')" />
</template>
<div id="app">
  <my-checkbox v-on:change.native="change" @change="change2"></my-checkbox>
</div>

Answer 2

Вам необходимо использовать событие input для флажков.Я бы также рекомендовал использовать v-on = "$ listeners" в компоненте Checkbox, если только вам не нужно называть событие '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>