vue 之 .sync

vue 之 .sync

官方解释:在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。(but，至今这一段我还是不是很理解，有好心人路过可以当个热心市民~)

目前个人理解：

1. 不加 .sync 时props传值
   父组件：

/*  html */
	<div :name='name' @setName='setName'></div>
	/*  js */
	<script>
	export default {
		data() {
			return {
				name: '何小花’
			}
		},
		methods: {
			setName(val) {
				this.name = val
			}
		}
	}

子组件：

/*  html */
	<div>{{name}}</div>
	/*  js */
	<script>
	export default {
		props: {
			name {
				type: String,
				default: ''
			}
		},
		methods: {
			changeName() {
				this.$emit('setName', '何大花')
			}
		}
	}

2. 加 .sync 时props传值
   父组件：

/*  html */
	<div :name.sync='name'></div>
	/*  js */
	<script>
	export default {
		data() {
			return {
				name: '何小花’
			}
		}
	}

子组件：

/*  html */
	<div>{{name}}</div>
	/*  js */
	<script>
	export default {
		props: {
			name {
				type: String,
				default: ''
			}
		},
		methods: {
			changeName() {
				this.$emit('update:setName', '何大花')
			}
		}
	}