vue子组件更新父组件值

子组件更新父组件

父组件定义参数

<template>
  <view class="prepayment-trial-info">
  		//这里是需要更新的数据:mailForm.sync="mailForm"，将会更新mailForm字段
    	<user-info-mail :mailForm.sync="mailForm"></user-info-mail>
  </view>
</template>

<script>
import userInfoMail from "../../../components/user-info-mail/user-info-mail.vue"
export default {
  data() {
    return {
      mailForm: {
        name: "",
      }
    }
  },
  methods: {
  },
  components: { userInfoMail }
}
</script>

<style scoped lang="scss">
.prepayment-trial-info {
 
}
</style>

子组件定义参数以及更新父组件参数

<template>
  <view class="user-info-mail">
    <view class="list">
      <view class="item item-border">
        <view class="left"> 收件人：</view>
        <view class="item-right ">
          <input type="text" class="right" placeholder="请输入收件人" v-model.trim="mailForm.name"/>
          <view class="img"></view>
        </view>
      </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      mailForm:{
        name:"",
      }
    }
  },
  watch:{
    mailForm:{
      handler: function() {
      //深度监听对象 当对象有改动时将更新父组件页面定义的mailForm数据
       this.$emit('update:mailForm',this.mailForm)
     },
     deep: true
    }
  },
  methods:{
  }
}
</script>

<style scoped lang="scss">
.user-info-mail {

  }
}
</style>

这样当在输入框输入值后，将会用watch监听变化，然后再去更新父组件的值。