Vue v-model绑定到父组件输入元素不起作用答案

【问题标题】：Vue v-model bind to Parent component input element doesn't workVue v-model绑定到父组件输入元素不起作用
【发布时间】：2021-07-01 04:32:47
【问题描述】：

我正在使用 Vue、Nuxt、Vue Good Table 实时搜索表格。我创建了一个名为child.vue 的子组件，并将其导入到父页面parent.vue。我使用v-model 将searchTerm 绑定到父组件中的input 元素上。当我运行它时，实时搜索不起作用。我从控制台收到警告。 Property or method "searchTerm" is not defined on the instance but referenced during render.你能帮帮我吗？我是 Vue.js 的新手。谢谢

对于child.vue

<template>
<vue-good-table
    :columns="columns"
    :rows="rows"
    :search-options="{
      enabled: true,
      externalQuery: searchTerm
    }"
    :sort-options="{
      enabled: false,
    }"
    :group-options="{
      enabled: true, 
    }"
  />
</template>
<script>
export default {
    name: 'my-component',
    data() {
        return {
            searchTerm: '',
            columns: [xxxx]
        }
    }
}
</script>

对于parent.vue

<template>
  <div>
    <input type="text" placeholder="Live Search" v-model="searchTerm" />
  </div>
  <div>
    <child />
  </div>
</template>

【问题讨论】：

标签： vue.js vuejs2 nuxt.js vue-good-table

【解决方案1】：

将prop从parent传给child，并在parentsdata中定义searchTerm

<template>
...
  <input type="text" placeholder="Live Search" v-model="searchTerm" />
  <child :searchTerm="searchTerm" />
...
</template>
<script>
  data(){
    return {
      searchTerm: ''
    }
  }
...
</script>

在child中定义prop，在childs中删除searchTermdata

<script>
export default {
  ...
  props: ['searchTerm'],
  ...
  data(){
    return {
      //searchTerm: '' <- remove this from child
    }
  }
   ...
}
</script>

您现在可以访问子代<template> 中的searchTerm 或子代<script> 中的this.$props.searchTerm

【讨论】：