从Vue中的html视图调用组件函数

Question

我被困在 Vue 的逻辑用法中，我有一个从 ajax 获取结果的“列表”组件，当我想添加搜索字段时出现问题，我有这样的东西：

搜索.vue

<template>
  <div>
    <div v-for="(result, index) in results">
      <h2>{{ result.name }}</h2>
    </div>
  </div>
</template>

<script>
  export default {
    name : 'searchList',

    data() {
      return { results: [] }
    }

    created: function(){
      this.goSearch();
    },

    methods : {
      goSearch : function(){
        this.results = axios.get('/search');
      }
    }
  }
</script>

这就像一个魅力，关键是我想在搜索中添加一个输入，我做了一些研究，我发现获得它的唯一方法是使用另一个组件，但我没有想为输入创建另一个组件，所以我想做类似的事情：

index.html

<input type="text" v-model="goSearch">

<search-list></search-list>

但我面临的问题是 Vue 返回错误：

[Vue warn]: Property or method "goSearch" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我也尝试过v-bind="goSearch"，但也没有用。有什么想法可以做到这一点？

更新： 我创建了一个按钮来调用该函数：

<button @click="goSearch"></button>

函数“goSearch”现在尝试从文本框中获取值，但这也不起作用。

Answer 1

您收到此类错误是因为您正在使用：

<input type="text" v-model="goSearch">

这里，goSearch 是data，vue 没有找到这个数据。但你的意思是它是一种方法。 Vue 不是这样工作的。如果要在其中绑定某些方法，则不需要使用v-model。但是你需要绑定v-on:input

<input type="text" v-on:input="goSearch">

Answer 2

问题在于goSearch 方法是在searchList 组件内部定义的，它之外的任何东西都不知道它是什么（在本例中是输入元素），因此会发出警告。

一种解决方案是在父组件中定义方法（在这种情况下，它看起来像是 index.html），因此所有子组件都可以访问它。

您还必须将results 数组存储在父data 中，并使用props 和goSearch 函数将其发送到searchList 组件，如下所示：

search.vue

<template>
    <div>
        <div v-for="(result, index) in results" v-bind:key="index">
            <h2>{{ result.title }}</h2>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'searchList',
    props: ['results'],
    created: function () {
      this.$emit('goSearch')
    }
  }
</script>

父组件：

<template>
  <div id="app">
    <button v-on:click="goSearch">Get Random Post</button>
    <search-list
            v-on:goSearch="goSearch"
            v-bind:results="results"
    ></search-list>
  </div>
</template>

<script>
import searchList from './components/searchList'

export default {
  name: 'App',
  data () {
    return { results: [] }
  },
  components: {
    searchList
  },
  methods: {
    goSearch: function () {
      const postId = Math.floor(Math.random() * (100 - 1 + 1)) + 1
      fetch('https://jsonplaceholder.typicode.com/posts/' + postId)
        .then(response => response.json())
        .then(json => {
          this.results = [json]
        })
    }
  }
}
</script>

请记住，如果多个组件使用该属性/方法，则需要在父组件中定义它，然后使用 props 将该信息发送到子组件，子组件可以触发该父组件的事件使用emit。

另外，请查看this answer。