理解Vue中prop单向绑定，双向绑定，.sync修饰符关系

主要针对于vue的单向绑定，双向绑定中的.sync修饰符详解

vue中常利用prop进行父组件与子组件的之间的数据传递，常用方式：

• 父组件中
  利用import引入子组件，在component中注册，在html中使用

<initialEcharts :visible.sync="showContrast"  />

import initialEcharts from './InitialEcahrts.vue'
components: {
    initialEcharts
 },

• 子组件
  需要注册props，以this.visible使用

props: {
   visible:{
     type:Boolean,
     default:false
   }
 },

单向传递，父组件传递子组件数据，

• 在父组件中 :visible=“showContrast” (showContrast是个变量)
• 在子组件中 props中注册visible,在全局以this.visible(值为"message")使用

如果需要改变父组件的值，则涉及子组件与父组件之间的数据传递，

• 父组件中 :visible="message" @update:visible="visible = $event"
• 子组件中 this.$emit('update:visible',data)

需要使用this.$emit(事件名,发送给的数据)，向父组件发送数据，让父组件更改数据，不能在子组件中直接更改父组件的值，例如：在子组件中，this.visible = false 等操作，会报错
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “visible”

其中visible = $event可以由方法代替，@update:visible=“changeVisible”，在methods中定义，其中value是形参，实参是子组件传回的值

changeVisible(value){
 	this.visible = false
 }

还可以使用.sync修饰符进行双向传递，

• 父组件 :visible.sync="showContrast"
• 子组件 this.$emit('update:visible',data)
  不用再定义更新事件，.sync会自动添加用于更新的监听器，子组件相关操作不改变

如果有哪里有错，欢迎指正