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

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

search.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>

我也尝试过使用

v-bind=“goSearch”

，但也不起作用。有什么办法可以做到这一点吗

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

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

---

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

您遇到这种错误是因为您使用了：

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

---

问题在于

goSearch

方法是在

searchList

组件中定义的，它之外的任何东西都不知道它是什么（在本例中是输入元素），因此会发出警告

解决方案是在父组件中定义方法（在本例中，它看起来像index.html），以便所有子组件都可以访问它

您还必须将

结果

数组存储在父

数据

中，并将其与goSearch函数一起发送到

搜索列表

组件，如下所示：

搜索.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>

{{result.title}
导出默认值{
名称：'搜索列表'，
道具：[“结果”]，
已创建：函数（）{
此.$emit（'goSearch'））
}
}

父组件：

<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>

随机投递
从“./components/searchList”导入搜索列表
导出默认值{
名称：“应用程序”，
数据（）{
返回{results:[]}
},
组成部分：{
搜索列表
},
方法：{
goSearch：函数（）{
const postId=Math.floor（Math.random（）*（100-1+1））+1
取（'https://jsonplaceholder.typicode.com/posts/"(职位)
.then（response=>response.json（））
。然后（json=>{
this.results=[json]
})
}
}
}

请记住，如果有多个组件使用该属性/方法，则需要在父组件中定义该属性/方法，然后使用

props

将该信息发送给子组件，子组件可以使用

emit

触发该父组件的事件

---

另外，请检查。

@Core972我已经读过了，但据我所知，道具仅用于子组件到父组件，不是吗？您创建的

和
方法
键不在导出对象中。您没有收到解析错误吗？感谢您的回答，但Vue也会返回相同的错误并添加新错误：[Vue warn]：事件“input”的处理程序无效：未定义这是一个很好的答案，但我无法统一输入和结果，因为它们有一些html结构，并且将它们放在一起意味着我必须将所有html放在vue模板中。另外，使用$emit（'goSearch'）；返回一个错误：[Vue warn]：created hook中的错误：“ReferenceError:$emit未定义”，我想您谈论的是使用两个组件，这是我不想做的，但这似乎是必须的。怎么回事？发生了什么？我只是更新了我的评论。对不起，我过早地按了enter键。请问，是否所有内容都包装在
导出默认值
对象中？是的。作为组件的一部分。在我的app.js中，我把它叫做：Vue.component（'search-list'，require（'./components/SearchList.Vue'）；当然，它在组件之外。
<input type="text" v-on:input="goSearch">

<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>