vue如何通过父组件控制子组件的checkbox

Question

如题所示

子组件:

<input type="checkbox" v-model="checked" @click="setRember">

props:{
    checked: {
      type: Boolean,
      default: false
    },
}
methods：{
    setRember() {
      this.$emit('setRember', this.checked);
    }
}

父组件

<FormInput 
:checked="checkStateData"
@setRember="changeCheckBox"
>

data(){
    return(
        checkStateData:false,
    )
}

methods:{
    changeCheckBox(val){
      //axios请求
      //请求成功则控制子组件FormInput的checkbox选中
    },
}

现在需要再父组件的changeCheckBox事件中执行异步请求，请求成功则控制子组件checkbox选中，否则不选中。这样应该如何操作呢？

Answer 1

下面的例子用了button点击操作来模拟其他操作，可替换成别的，可以满足这样几个需求：

• 通过父组件变量控制子组件的checkbox选中状态
• 子组件自身的选中状态同步到父组件中，避免父组件操作引起选中状态不同步

子组件：

<input type="checkbox" v-model="selected" @change="changeValue" />

props: {
  check: {
    type: Boolean,
    default: false
  }
},
data () {
  return {
    selected: this.check
  }
},
watch: {
  check (value) {
    this.selected = value
  }
},
methods: {
  changeValue (e) {
    this.$emit('change', this.selected)
  }
}

父组件:

<FormItem :check="checkStatus" @change="getChangeValue"></FormItem>
<button @click="changeInputValue">改变input选中状态</button>

data () {
  return {
    checkStatus: true,
  }
},
methods: {
  getChangeValue (value) {
    this.checkStatus = value
  },
  changeInputValue () {
    this.checkStatus = !this.checkStatus
  }
}

如果只是希望页面进入的时候初始化子组件的默认状态，那就没有必要同步更新父组件的状态了。另外也可以用vuex来做这一套状态管理，这样不管场景多复杂，组件嵌套多少层，只需要注意子组件变量与其他组件值更新后的对应关系。