子组件改变父组件的值

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_37068028/article/details/82973200

子组件改变父组件的值，会报错。其实是采用单向数据流，子组件不能直接改变父组件的值，是以单向数据流的方式流转数据。可以采用以下两种减少代码量的方式改变父组件的值（忽略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>
  `
})