子组件改变父组件的值,会报错。其实是采用单向数据流,子组件不能直接改变父组件的值,是以单向数据流的方式流转数据。可以采用以下两种减少代码量的方式改变父组件的值(忽略on和emit事件方式)。
方法一::xx.sync 和 $emit(‘update:xx’)
Vue.component('child', {
props: ['selected'],
template: `
<div style="border: 1px solid gray;">
<div>{{selected}}</div>
<button @click="$emit('update:selected', 1)">Button 1</button>
<button @click="$emit('update:selected', 2)">Button 2</button>
</div>
`
})
new Vue({
el: '#app',
data() {
return {
value: 1
}
},
template: `
<child :selected.sync="value"></child>
`
})
<child :selected.sync="value"></child>
等价于
<child :selected="value" @update="selected=$event"></child>
方法二:使用v-model 和$emit(‘input’)
Vue.component('child', {
props: ['value'],
template: `
<div style="border: 1px solid gray;">
<div>{{value}}</div>
<button @click="$emit('input', 1)">Button 1</button>
<button @click="$emit('input', 2)">Button 2</button>
</div>
`
})
new Vue({
el: '#app',
data() {
return {
value: 1
}
},
template: `
<child v-model="value"></child>
`
})