Question

在我的项目中，我分别具有三个组件，分别是Home.vue，Searchform.vue和Searchresults.vue。

Home.vue -是我正在显示其他两个组件的视图

Searchform.vue -是保存搜索输入字段的组件

Searchresults.vue -是以“表格形式”显示搜索输入结果的组件。

因此，当用户进行搜索查询并在表中呈现结果时。我提出了一种方法来使行单击到数据中，并将道具传递给Searchform.vue，然后将道具绑定到home.vue上。但是道具数据未显示在Searchform.vue组件上，因此在home.vue视图上也未显示。

下面是两个组件和home.vue的代码

Home.vue

const [page, setPage] = React.useState(0);
const [steps, setSteps] = React.useState([ 
        {title: 'Visitor Details'},
        {title: 'Personal Details'},
        {title: 'Nominee Details'}
        ])

function nextPage() {
    setPage(page + 1)
  }

function previousPage() {
    setPage(page - 1)
}

Searchresults.vue

<template>
  <div class="home">
    <div class="example" v-if="isLoading === true">
      <a-spin size="large" />
    </div>
    <Navbar />
    <div class="container">
    <SearchForm 
      v-on:search="search"
      :selectedinterest="selectedinterest"
    />
    <SearchResults 
      v-if="interests.length > 0"
      v-bind:interests="interests"
      v-bind:reformattedSearchString="reformattedSearchString"
    />
    <ErrorMessage 
      v-if="interests.length < 0"
      v-bind:interests="interests"
     />
    <Footer />
  </div>
  </div>
</template>

最后，我想将道具传递给Searchform.vue并将其绑定到home.vue上以获取数据

export default {
data() {
 return {
  selectedinterest: []
 }
}
addSelection(interest) {
    this.selectedinterest.push(interest.name))
 }
}

请我如何将道具“ selectedinterest”从searchresults.vue组件传递到home.vue和searchform.vue。

Answer 1

Props in - events out

Searchresults.vue

export default {
data() {
 return {
  selectedinterest: []
 }
}
addSelection(interest) {
    this.selectedinterest.push(interest.name));
    this.$emit('onInterestSelected', this.selectedinterest);
 }
}

Home.vue

...
<SearchResults 
  v-if="interests.length > 0"
  v-bind:interests="interests"
  v-bind:reformattedSearchString="reformattedSearchString"
  v-on:onInterestSelected="updateSelectedInterest"
/>
<!-- don't forget create method updateSelectedInterest(updatedInterest) -->
...

Answer 2

一种可行的方法可能是在addSelection方法内的Searchresults.vue组件中发出一个事件。

addSelection(interest) {
    this.selectedinterest.push(interest.name))
    this.$emit('addedSelection', this.selectedinterest);
}

在父组件中，您将监听事件并使用一种方法来存储事件数据，然后将其作为道具传递给其他组件。

<SearchResults 
      v-if="interests.length > 0"
      v-bind:interests="interests"
      v-bind:reformattedSearchString="reformattedSearchString"
      @addedSelection="addedSelectionTriggered"
/>

在父组件中使用AddedSelectionTriggered方法，您可以存储发出的selectedinterest数组并将其作为道具传递。

如何将道具从父组件传递到子组件

2 个答案: