首先我们先看下 官方文档 的描述:
注意:此处的v-bind不能省略,即不可以写成.sync=“doc”。
下图为父组件中对应的写法:
<template>
<div class="hello">
<h1>a:{{ syncObj.a }}</h1>
<h1>b:{{ syncObj.b }}</h1>
<secondCom v-bind.sync="syncObj" />
</div>
</template>
<script>
import secondCom from './secondCom.vue'
export default {
name: 'HelloWorld',
components: { secondCom },
data() {
return {
syncObj:{
a:'1',
b:'2',
},
}
},
}
</script>
子组件:
<template>
<div>
<div @click="$emit('update:a',5)">{{a}}aaa</div>
<div @click="$emit('update:b',6)">{{b}}bbb</div>
</div>
</template>
<script>
export default {
props: {
a:[String,Number],
b:[String,Number],
},
}
</script>
另外,其实不在子组件中定义props也可以,只要通过$attrs.a、 $attrs.b获取即可,不会影响$emit的使用。