子组件数据发生变化时 通过change反射给父组件

该场景在多数第三方ui库都有看到

当然实现方式有多种方式 本文采取主流的 change 事件反射

element-ui 一个input组件中

直接上代码

父组件

<template>
  <div>
      <children @change="getChange"></children>
  </div>
</template>

<script>
import children from "./children"
export default {
    components: {
        children
    },
    methods: {
        getChange(newVal,oldVal){
            console.log(newVal, oldVal)
        }
    }
}
</script>

子组件

<template>
  <div style="padding:100px">
      <a-input @change="handlerChanges" v-model="value" style="width:200px" placeholder="我是子组件"></a-input>
  </div>
</template>

<script>
import {Input} from "ant-design-vue"
export default {
    components: {
        aInput: Input
    },
    data(){
        return {
            value: ""
        }
    },
    methods: {
        handlerChanges(){
            // 这里用 watch 监听 value 的变化也行
            // change 是可以传递两个参数的  一个新值 一个旧值  所以可以放在watch 中一块传递
            // this.$emit("change", this.value, 1) 
        }
    },
    watch:{
        value(newVal, oldVal){
            this.$emit("change", newVal, oldVal) 
        }
    }
}
</script>

题外话

如果是非文本框的数据则可以 用v-model + watch模式

类似的博文 v-model + watch

当然我的这篇博文 也是文本框模式 小小改动就好啦 非文本框的业务场景实在不多见 因为存在交互的标签总有恰当的时机对外暴露数据