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'。

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>

Answer 2

.native modifier用于组件，而不是用于本机窗口小部件。

有时您可能想直接收听本地事件在组件的根元素上。在这种情况下，您可以使用 .v-on的.native修饰符

您可以在外部绑定中使用.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>

v-on：change.native不会绑定在父组件中：Vue.js

2 个答案: