vue是不允许子组件直接修改prop的值 只能将prop的值再赋给其他值 再转换 但这属实太麻烦了
父组件内
<child-cop :cmessage=“message” @update:cmessage="message = $event"></child-cop>
data: {
message: '父组件中的message'
}
子组件
props: ['cmessage'],
methods: {
changeMessage() {
this.$emit('update:cmessage', '修改的值')
// 注意不能直接修改父组件的传值 this.cmessage，只能传值给父组件，在父组件中修改原始的message
}
}
这样当点击“父组件中的message”，就会变成“修改的值”。父组件将“父组件中的message”传递给子组件，子组件又将“修改的值”传递给父组件，形成了“双向绑定”。
使用sync修饰符
父组件中的代码就可以简化如下：
<child-cop :cmessage.sync="message"></child-cop>
总结
父组件将message的值传给子组件的，子组件中触发事件update:xxx需要修改父组件的message，就可以用.sync修饰符简化：
<child-cop :xxx.sync="message"></child-cop>
.sync修饰符其实就是将上述代码转换成
<child-cop :xxx="message" @update:xxx="message = $event"></child-cop>
一般就是 父组件内 比如
<test :cmessage.sync="message"></test>
子组件内 一旦传给子组件 同事修改也会反馈给父组件
<template>
<div @click="changeMessage">
{{cmessage}}
</div>
</template>
<script>
require('leaflet/dist/leaflet.css')
export default {
props: ['cmessage'],
data () {
return {
}
},
mounted () {
console.log(this.$emit('update:cmessage',"被修改成了子组件的值"));
},
methods: {
changeMessage() {
this.$emit('change', '修改的值')
// 注意不能直接修改父组件的传值 this.cmessage，只能传值给父组件，在父组件中修改原始的message
}
}
}
</script>
<style scoped>
</style>
