v-model实现父子组件通信

28 阅读1分钟

父组件使用v-model,子组件在props中用value接值,子组件用input(默认事件名),将子组件更新的值传给父组件。(可在model中修改事件名)

//父组件 parent.vue
<child v-model="inputVal">
<script>
export default {
    data(){
        return {
            inputVal:null
        }
    }
}
</script>
//子组件 child
<template>
  <view>
    <input
      :value="value"
      placeholder="123"
      @input="handleInput"
    >
  </view>
</template>
<script>
  export default {
    props: {
      value: {
        type: String,
        default: '',
      },
    },
    model:{
     event :'updateValue'
    },
    methods: {
      handleInput(e) {
      //事件名默认input,
        this.$emit('input', e.target.value); 
        //若在model中修改了事件名,在方法中使用修改的名
        //this.$emit('updateValue',e.target.value)
      },
    },
  };
</script>