Vue prop 子组件 给 父组件 使用sync传值 双向数据绑定

父传子
Vue prop组件间通信（父传子）

父组件

<User :name="userName" />

 data() {
      return {
        userName: '生产队的驴'
      }
    }

子组件

 <span>用户名：{{name}}</span>
 <button @click="alter">点击给父组件传值</button>

		 props: {
            name: {//值名称
                type: String,//值类型
                required: true,//必传
            }

        },
			

		 methods: {

            alter() {
           
                this.name = '123'
            }

        }

prop是只读的如果直接更改他会报错，虽然报错了但是值还是会修改成功，并且父组件的值不会变动

—

解决方案 子传父双向数据绑定

父组件
在变量名前面添加sync，这个时候如果子组件修改了name变量，父组件的userName也会发送改变

  <User :name.sync="userName" />
  ---------------------
   data() {
      return {
        userName: '生产队的驴'
      }
    }

子组件
update：这是固定值，表示更新数据
name：表示需要修改的变量

<span>用户名：{{name}}</span>
 <button @click="alter">点击给父组件传值</button>

  alter() {
                 this.$emit('update:name', '新值')
         		  
        }