Vue2 避免直接改变一个道具，因为该值将被覆盖

Question

当我想传递一个在请求响应更新后将更改的值时，我看到了这个错误。这意味着我有一个模态子组件，我想在response has success 之后关闭它，并且我有类似这样的 tyren。

ERROR: [Vue 警告]：避免直接改变 prop，因为只要父组件重新渲染，该值就会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“addModalVisibility”

父组件

<v-action 
  @addUser="addUser" 
  :addModalVisibility="addModalVisibility"
></v-action>

 data(){
  return {
    addModalVisibility: false,
    ....

addUser(user_id, name, email, password){
                axios({
                    method: 'POST',
                    url: '/admin/users',
                    data: {
                        user_id: user_id,
                        name: name,
                        email: email,
                        password: password
                    }
                })
                .then(response => {
                    this.addModalVisibility = !this.addModalVisibility // i want to close the modal here 
                    this.getUsers()

子组件

import Modal from './modal.js';
import Button from './button.js';

export default {
    components: {
        'v-modal' : Modal,
        'v-button': Button
    },

    data() {
        return {
            id: '',
            user_id: '',
            password: '',
            name: '',
            email: '',
            query: '',
            url: ''
        }
    },

    props: [
        'addModalVisibility'
    ],

    methods: {
        getUsers() {
            this.$emit('getUsers')
        },
    },

    template: `
        <div class="add-user py-4">
            <div class="d-flex">
                <div class="col-10">
                    <!-- Button trigger modal -->
                    <v-button type="success" @click.prevent="addModalVisibility = !addModalVisibility" >
                        Add User
                    </v-button>
                    <v-button type="primary" data-mdb-toggle="collapse" data-mdb-target="#collapseFilter" aria-expanded="false" aria-controls="collapseFilter" >
                        Filter
                        <i class="fa-solid fa-filter"></i>
                    </v-button>
                    <v-button v-show="selected.length>0" type="danger" class="dropdown dropdown-toggle" id="dropdownMenuButton" data-mdb-toggle="dropdown" aria-expanded="false" >
                            Action ({{selected.length}})
                    </v-button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <li>
                            <a :href="url" class="dropdown-item btn-warning text-center">
                                Export
                                <i class="fa-solid fa-file-excel"></i>
                            </a>
                        </li>
                        <li>
                            <v-button @click="massDeleteUser()" type="danger" class="dropdown-item text-center">
                                Delete
                                <i class="fa-solid fa-trash"></i>
                            </v-button>
                        </li>
                    </ul>
                </div>
                <div class="col-2">
                    <input v-model="query" type="search" class="form-control border-0" placeholder="Search" />
                </div>
            </div>

            <!-- Add Modal -->
            <v-modal v-model="addModalVisibility" @submit_changers="addUser">
                <template v-slot:modalTitle>
                    Add User
                </template>
                <form id="" class="form-horizontal validate-form">
                    <div class="form-group mb-2">                
                        <input v-model="user_id" id="user_id" type="number" class="form-control" placeholder="user_id">        
                    </div>          
                    <div class="form-group mb-2">                
                        <input v-model="name" id="name" type="text" class="form-control" placeholder="name">        
                    </div>          
                    <div class="form-group mb-2">                
                        <input v-model="email" id="email" type="email" class="form-control" placeholder="email">        
                    </div>          
                    <div class="form-group mb-2">                
                        <input v-model="password" id="password" type="password" class="form-control" placeholder="password">        
                    </div>
                </form>
                <template v-slot:modalFooterBtn>
                    Save
                </template>
            </v-modal>
            
        </div>
    `,
}

Answer 1

您收到的错误消息指出，只要父组件重新渲染，该道具就会被覆盖。这是因为更新子组件中的 prop没有在父级中更新它，因此父级将继续将相同的值传递给子级。

解决此问题的一种方法是根据道具的值创建一个数据属性。例如：

//child component

...
props: ['addModalVisibility'],
data(){
  return {
    ...
    modalVisibility: false
  }
},
mounted(){
  //here we move the value from our prop to a local data property
  this.modalVisibility = this.addModalVisibility;
}

然后在您的子组件中，您将使用modalVisibility 而不是addModalVisiblity - 它现在在应用程序的数据中而不是在道具中。