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

您需要為復選框使用input事件。 我還建議在Checkbox組件中使用v-on="$listeners" ，除非您確實需要將事件命名為'change' 。

復選框.vue

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

索引.vue

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

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

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

Answer 2

.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>