Question

我有两个道具：

props:['bank_lists','branch_list'])

在更改银行时，我要更改“ branch_list”。

HTML：

        <div class="form-group m-form__group row">
          <label for="accounts_bank_id" class="col-lg-3 col-form-label">Bank <span class="requiredField">*</span></label>
          <div class="col-lg-6">
            <select class="form-control select2" id="accounts_bank_id"  v-model="form.accounts_bank_id" data-selectField="accounts_bank_id" @change="loadBranch()">
              <option v-for="(value,index) in bank_lists" :value="value.id"> {{value.accounts_bank_names}}</option>
            </select> 
          </div>
        <div class="form-group m-form__group row">
          <label class="col-lg-3 col-form-label" for="accounts_branch_id">Bank Branch </label>
          <div class="col-lg-6">
            <select class="form-control select2" id="accounts_branch_id"  v-model="form.accounts_branch_id" data-selectField="accounts_branch_id">
              <option v-for="(bvalue,bindex) in branch_list" :value="bvalue.id"> {{bvalue.bank_branch_names}}</option>
            </select>
          </div>

JS：

        loadBranch(){
          var _this = this;
          var id= this.form.accounts_bank_id;
          axios.get(base_url+"bank-account/"+id+"/branch-list").then((response) => {
            console.log(_this.branch_list);
            if(response.data!=''){
              _this.branch_list = response.data;
            }
            else{
              _this.branch_list = '';
            }
          });
        },

如果我直接更改道具branch_list，则会发出以下警告：

warning: bank-account.js:2056 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "branch_list"

如何使用计算/数据方法消除错误？

Answer 1

要视情况而定。
将值作为属性传递给子组件意味着该数据的“所有者”是父项，并且它应该是唯一使该数据发生突变的人（这就是为什么获得[Vue warn]的原因）。

如果您的loadBranch()方法位于子组件中，那么将branch_list传递为prop可能是错误的事情，branch_list的数据所有权可能应该在子组件本身（即不是prop而是数据对象）。
如果在其他位置需要branch_list，则您的loadBranch()代码也应位于父级中。在这种情况下，只需更改$emit的事件即可bank_list，在父级中监听此事件，然后在父级中也更新您的branch_list。由于它将作为道具绑定，因此新值将自动传播到子级。

简而言之：将数据所有权保持在组件树的尽头，如果在树的更深处所做的更改应该对您的数据有任何影响，则从子组件中发出事件，在数据所有者组件中侦听它们，然后在此更新您的数据，然后再次传播出去。

// in child:
<select ... @change="$emit('selection-changed', $event)">

// in parent:
<ChildComponent ... @selection-changed="loadData($event)">
...
loadData(e) {
    this.myData = getNewDataForValue(e.target.value)
}

如何在更改另一个道具值时更新道具？

1 个答案: