您将input中的v-model设置为query.name，这意味着query当您更改输入值时，它将发生变化。由于 query 是一个 prop，因此您不能执行此操作。

除了@Ian回答之外，要修复此警告，一种解决方案是使用get创建一个compulated属性，其值为query prop 和 set 带有 emit 事件到父组件，以更新父组件的查询 prop，并且在 html 中，您可以使用 计算的值而不是prop值

<template>
      <div class="searchbar">
        <input
          type="text"
          v-model="compQuery.name" // this is the error
          class="input"
          placeholder="Search"
        />
    <div v-if="query.name.length > 3">
        <select v-model="compQuery.status" class="select"> // This is the error
          <option value="alive">Alive</option>
          <option value="dead">Dead</option>
          <option value="unknown">Unknown</option>
        </select>
    </div>
    
      </div>
    </template>
    
    <script>
    export default {
      props: {
            query: String
      },
      computed: {
        compQuery: {
          get () { return this.query },
          set (value) { this.$emit('update:query', value) },
        },
      },
    };
    </script>

并且在该组件的父组件中，您可以将 prop 传递为 v-model:prop="prop"

例如

<child v-model:query="query" />