子コンポーネントのデータが変更されると、変更を通じて親コンポーネントに反映されます
このシーンは、ほとんどのサードパーティのUIライブラリで見られます
もちろん、これを実現する方法はたくさんあります。この記事では、主流の変更イベントの反映を採用しています。
入力コンポーネントのelement-ui
直接コーディングする
親コンポーネント
<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>