Vue组件报错：Avoid mutating a prop directly 问题求助

问题背景 #

我正在打造高灵活性的Vue表格组件，将按钮与搜索框抽离为公共组件TableCustomAction，按钮功能正常，但操作搜索框时控制台触发报错：

[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: "query"

已知问题出在修改query prop时，需要修复方案。

TableCustomAction组件代码 #

//custom action buttons
import Button from './button.js';

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

    props: {
        query: {
          type: String
        },
        selected: {
            type: Array
        },
        url: {
            type: String
        }
    },

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

        massDeleteRecord() {
            this.$emit('massDeleteRecord')
        }
    },

    template: `
        <div class="add-user py-4">
            <div class="d-flex">
                <div class="col-10">
                    <v-button type="success" @click.prevent="showModal" >
                        Add Record
                    </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="massDeleteRecord()" 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 @input="$emit('updatedQuery', $event.target.value)" 
                        :value="query"
                        type="search"
                        class="form-control border-0"
                        placeholder="Search"
                    />
                </div>
            </div>
            
        </div>
    `,
}

用户表格组件代码 #

<template>
<table-custom-action 
   @massDeleteRecord="massDeleteUser" 
   @showModal="showModal" 
   @updated-query="(newQuery) => query = newQuery"
   :selected="selected"
   :query="query"
   :url="url"
 ></table-custom-action>
</template>

<script>
import TableCustomAction from './partials/modules/TableCustomAction.js';
export default {
        components: {
            TableCustomAction,
        },
        
        data(){
            return {
                ....
                query: '',
                ....
                url: ''
            }
        },  
watch: {
            query: function(newQ, old) {
                if (newQ === "") {
                    this.getRecord();
                } else {
                    this.searchRecord();
                }
            },
        },
</script>

修复方案 #

你的核心逻辑（通过$emit通知父组件更新query，用:value绑定prop而非v-model）是正确的，报错主要由模板转义和事件处理细节问题导致，按以下步骤修复：

1. 还原模板中的HTML转义字符
   组件模板里的<、"等转义字符会导致Vue无法正确解析模板，间接引发prop相关错误，直接替换为原始HTML符号：

   • 将<替换为<
   • 将"替换为"

2. 简化父组件的事件处理
   父组件的事件监听可以简化为直接赋值，避免箭头函数的潜在上下文问题：

<table-custom-action 
   @massDeleteRecord="massDeleteUser" 
   @showModal="showModal" 
   @updated-query="query = $event"
   :selected="selected"
   :query="query"
   :url="url"
 ></table-custom-action>

3. 可选：子组件添加局部数据中间层（如需本地处理）
   如果需要在子组件内对搜索值做防抖、格式化等本地处理，可以定义局部数据作为中间层：

data() {
  return {
    localQuery: this.query
  }
},
watch: {
  query(newVal) {
    this.localQuery = newVal
  }
},
methods: {
  handleInput(val) {
    this.localQuery = val
    this.$emit('updatedQuery', val)
  }
}

模板中修改为：

<input @input="handleInput($event.target.value)" 
       v-model="localQuery"
       type="search"
       class="form-control border-0"
       placeholder="Search"
/>

完成以上修改后，报错即可消除，搜索功能正常运行。

内容的提问来源于stack exchange，提问作者Maison012