这个关键字在v2.0后不再被官方建议使用。说白了他就是子组件改变父组件DATA的一种方法,这也是有容易污染组件数据的隐患,
可以运行一下示例代码,参考vue dev tool ,就会明白
father.vue:
<template> <div class="hello"> //input实时改变wrd的值, 并且会实时改变box里的内容 <input type="text" v-model="wrd"> <hr> 这是name---{{sname}} <!-- 不写sync不更新父组件数据,变成了单向的父组件传值给子组件的写法 --> <box :word.sync="wrd" :sname.sync="sname" ></box> </div> </template> <script> import box from './child.vue' //引入box子组件 export default { name: 'HelloWorld', data() { return { wrd: '', sname:'zs', age:12 } }, components: { box } } </script>
child;vue
<template> <div class="hello"> <div class="ipt"> <hr> --------------------------------------------- <br> <input type="text" v-model="str"> </div> //word是父元素传过来的 <br> <h2>{{ word }}</h2> <br> //sname也是 <br> <h2>{{ sname }}</h2> </div> </template> <script> export default { name: 'box', data() { return { str: '', } }, props: { word: { type:String, default:'' }, sname:{ type:String, default:'ls' } }, watch: { str: function(newValue, oldValue) { //每当str的值改变则发送事件update:sname , 并且把值传过去,这时会修改父组件的data值 this.$emit('update:sname', newValue); //如果多个值又不想用object,可以多次emit this.$emit('update:word', newValue+'1'); } } } </script>