vue :on-change 父与子之间的传递

在Vue中，父组件可以通过v-on或@来监听子组件触发的事件，并在子组件中通过$emit来触发事件。

父组件：

<template>
  <div>
    <ChildComponent @change="handleChange" />
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChange(newValue) {
      console.log('Received change event from child with value:', newValue);
    }
  }
};
</script>

子组件：

<template>
  <div>
    <input type="text" :value="value" @input="updateValue($event.target.value)" />
  </div>
</template>
 
<script>
export default {
  props: {
    value: String
  },
  methods: {
    updateValue(newValue) {
      this.$emit('change', newValue);
    }
  }
};
</script>

在这个例子中，子组件有一个input元素，当input的值改变时，会触发input事件，然后在updateValue方法中使用$emit触发一个自定义的change事件，并将新值作为参数传递。父组件通过@change监听这个事件，并在handleChange方法中处理接收到的值。