vue-组件上使用v-model绑定父组件的值

项目场景：

在组件上使用v-model绑定父组件的值,子组件的值改变,父组件的值也跟随变化

---

问题描述

父组件传递给子组件值,子组件props接收,但不能直接更改父组件的值

实现步骤：

1.父组件页面 在子组件上v-model父组件的值

 <editName  v-model="userInfo.name"></editName>

2.子组件props接收,并在data中定义一个变量指向接收的这个值

<van-nav-bar class="title" title="昵称" left-text="取消" right-text="完成" left-arrow  @click-right="editInfo()" />
<van-cell-group inset>
     <van-field  v-model.trim="name"  />
 </van-cell-group>

 props: {
 //默认v-model绑定的  就用value接收
        value: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            name: this.value
        }
    },

3.子组件的值更改,并调用方法改变父组件的值

//修改个人信息
async editInfo() {
//默认就是input  第二个是要传递的参数
	  this.$emit('input', this.name)
},