Vue的sync修饰符

一、父组件向子组件传值

父组件通过属性的方式向子组件传值，子组件通过props接收
在父组件的子组件中绑定自定义属性

// 父组件
<Child :myName="name" />
    
export default {
    components: {
       Child 
    }
    ......
}

子组件通过props来获取值

// 子组件
export default {
    props: ['myName']
}

props: { myName: String } //这样指定传入的类型，如果类型不对会警告
props: { myName: [String, Number] } // 多个可能的类型
prosp: { myName: { type: String, requires: true } } //必填的的字符串
props: { 
    childMsg: { 
        type: Array, 
        default: () => [] 
    }
}  // default指定默认值
如果 props 验证失败，会在控制台发出一个警告。

二、子组件向父组件传值

在子组件中绑定一个事件，通过 this.$emit() 来触发

// 子组件
<button @click="changeParentName">改变父组件的name</button>
export default {
    methods: {
        //子组件的事件
        changeParentName: function() {
            this.$emit('update:change', 'Jack') // 触发父组件中update:change事件并传参Jack
            // 注：此处事件名称与父组件中绑定的事件名称要一致
        }
    }
}

在父组件中定义并绑定 update:change 事件

// 父组件
<Child @update:change="changeName"></Child>
methods: {
    changeName($event) {  // $event是子组件中传入的值Jack
        this.name = $event
    }
}

父子组件之间相互传递

//父组件
//里面的子组件
<Child :myname = "name"  @update:change="name = $event"></Child> //$event就是$emit的参数，把获取到的参数赋值给myname
//子组件
<button @click="$emit('update:change'), name = 'jack'">改变父组件的name</button>

这个可以简写为
<Child :myname.sync = "name"></Child>
.sync修饰符就是用来双向绑定数据。当一个子组件改变了一个props的值时，这个变化也会同步到父组件中所绑定