vue 中.sync修饰符的使用方法

最近在项目中看到有些地方用了.sync修饰符，所以进一步了解一下，并记录。
vue官网.sync修饰符介绍：点击查看
一般情况下，子组件向父组件传值并改变值都需要使用回调方法，但有更简洁的写法。
如下为简易案例：
常见的回调函数写法：

//	子组件代码：

<template>
	<div>
		<button @click="setNum">点击传值</button>
	</div>
</template>
<script>
	data() {
   		return {
   			num：20
   		}
   	}
   	methods: {
		setNum(){
			this.$emit('getNum',this.num)
		}
	}
</script>

//	父组件代码：

<template>
	<div>
		<Children @getNum="getNum"></Children>
		<text>{{number}}</text>	
	</div>
</template>
<script>
	data() {
   		return {
   			number：0
   		}
   	}
   	methods: {
		getNum(val){
			this.number = val
		}
	}
</script>

点击前后如下

使用.sync修饰符写法

//	子组件代码：

<template>
	<div>
		<button @click="setNum">点击传值</button>
	</div>
</template>
<script>
	data() {
   		return {
   			num：20
   		}
   	}
   	methods: {
		setNum(){
			this.$emit('updata:sum',this.num)
		}
	}
</script>

//	父组件代码：

<template>
	<div>
		<Children :sum.sync="number"></Children>
		<text>{{number}}</text>	
	</div>
</template>
<script>
	data() {
   		return {
   			number：0
   		}
   	}
   	methods: {
	}
</script>

点击效果同上。
回调函数写法核心代码：

//	子组件
this.$emit('getNum',this.num)

//	父组件
<Children @getNum="getNum"></Children>
getNum(val){
	this.number = val
}

.sync修饰符写法核心代码：

//	子组件
this.$emit('updata:sum',this.num)

//	父组件
<Children :sum.sync="number"></Children>

虽然.sync更加简洁，但使用其他组件时是不受控的，如：input,radio,checkbox等
以input为例：

//	子组件

<input type="text" v-model="text" />
<button @click="sumbit">提交</button>

sumbit(){
    this.$emit('updata:text',this.text)
    console.log(this.text)	//这里可以正常打印
}

//	父组件

<Children :text.sync="text"></Children>
<text>{{text}}</text>

console.log(this.text)//这里打印为空