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