如何将 props 从父组件传递给子组件答案

【问题标题】：How to pass props from parent components to child components如何将 props 从父组件传递给子组件
【发布时间】：2020-03-30 10:48:03
【问题描述】：

我的项目中分别有 Home.vue、Searchform.vue 和 Searchresults.vue 三个组件。

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

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

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

因此，当用户进行搜索查询并在表格中呈现结果时。我制作了一种方法来让一行点击进入数据并将一个道具传递给 Searchform.vue，然后将道具绑定到 home.vue 上。但是道具数据没有显示在 Searchform.vue 组件上，导致 home.vue 视图上没有显示。

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

主页.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>

搜索结果.vue

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

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

export default {
  name: 'SearchForm',
  props: [
    'selectedinterest'
  ]
}

请问如何从 searchresults.vue 组件中将 props 'selectedinterest' 传递给 home.vue 和 searchform.vue。

【问题讨论】：

标签： vue.js

【解决方案1】：

Props in - events out

搜索结果.vue

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

首页.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) -->
...

【讨论】：

【解决方案2】：

一种方法是在你的 Searchresults.vue 组件中的 addSelection 方法中发出一个事件。

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 数组并将其作为道具传递。

【讨论】：