vuejs中組件之間的通信。(搜索欄)

我是vue js的新手，正在開發一個帶有搜索功能的應用程式。

這是我的組件，搜索結果將被呈現。

<script>
import RecipeItem from "./recipe/RecipeItem" 。
import { baseApiUrl } from "@/global"/span>;
import axios from "axios" ;
import PageTitle from "./template/PageTitle"。

export default {
  name: "Search",
  components: { PageTitle, RecipeItem },
  data（） {
    return {
      recipes: [],
      recipe: {},
      搜索。''/span>。
    }
  },
  methods: {
    getRecipes（） {
      const url = `${baseApiUrl}/search? search=${this.search}`。
      axios(url).then((res) =>  {
        this.recipes = res.data;
      });
    }
  },
  watch: {
    搜索() {
      const route = {
        name: 'searchRecipes'。
      }
      if(this.search !== ') {
        route.query = {
          搜索。this.search.
        }
      }
    },
    '$route.query.search': {
      immediate: true,
      handler（value） {
        this.search = value
      }
    }
  },
};
</script>

<template> 
  <div class="recipes-by-category"/span>>
    <form class="search"> 
      <router-link :to="{ path: '/search', query: { search: search }}">
      <input v-model="search" @keyup。 enter="getRecipes()" placeholder="Search recipe" />
      <button type="submit">
        <font-icon class="icon"/span> 。 icon="['fas', 'search']"></font-icon>/span>
      </button>/span>
      </router-link>/span>
    </form>/span>
    <div class="result-search">   
      <ul>/span>
        <li v-for=" (recipe, i) in recipes" : key="i"/span>>
          <RecipeItem :recipe="recipe" />
        </li> 
      </ul>/span>
    </div>/span>
  </div>/span>
</template>/span>

到目前為止，它做了它應該做的事情，搜索并在螢屏上列印出結果。 但正如你所看到的，我在里面創建了搜索欄位，我想把它從搜索結果組件中取出來，并把它插入我的標題組件中，這對它來說更合理。 但我無法在我的搜索結果組件中呈現結果，而我的搜索欄位在標題組件中。

但我無法在我的搜索結果組件中呈現我的搜索欄位在標題組件中的結果。

標題組件

<template> 
  <header class="header"/span>>
    
    <form class="search"> 
      <input v-model="search" @keyup。 enter="getRecipes()" placeholder="Search recipe" />
      <router-link ：to="{ path: '/search', query: { search: this.search }}">
      <button type="submit">/span>
        <font-icon class="icon"/span> 。 icon="['fas', 'search']"></font-icon>/span>
      </button>/span>
      </router-link>/span>
    </form>/span>
    
    <div class="menu"> 
      <ul class="menu-links"> 
        <div class=" item-home">
          <li><router-link to="/"> 首頁</router-link></li>/span>
        </div>/span>
        <div class=" item-recipe">
          <li>/span>
            <router-link to="/"
              >菜譜
              <font-icon class="icon" 。 icon="['fa', 'chevron-down']"></font-icon>/span>
            </router-link>/span>
            < Dropdown class="mega-menu" title="Recipes" />
          </li> 
        </div>/span>
        <div class="item-login"> 
          <li>/span>
            < router-link to="/auth" v-if="hideUserDropdown" > 登錄</路由器-鏈接>
            <Userdropdown class="user" v-if="! hideUserDropdown" />
          </li> 
        </div>/span>
      </ul> 
    </div>/span>
  </header>/span>
</template>/span>

結果組件

<template> 
  <div class="recipes-by-category"/span>>
    <div class="result-search"/span>>  
      <ul>/span>
        <li v-for=" (recipe, i) in recipes" : key="i"/span>>
          <RecipeItem :recipe="recipe" />
        </li> 
      </ul>/span>
    </div>/span>
  </div>/span>
</template>/span>

uj5u.com熱心網友回復：

保持狀態變數在任何父組件中，這對標題組件和結果組件都是共同的。例如，如果你有一個像這樣的Layout組件：

<!--這是布局組件-->
<template> 
  <HeaderWithSearch v-on:newResults="someFuncToUpdateState"/span> />
  <ResultsComponent v-bind:results="resultsState"/span> />
</template> 
<!--狀態和更新狀態的函式都在這里的一個腳本中。-->

當搜索欄回傳結果時，你需要通過$emit呼叫將資料 "上傳到 "父組件，然后父組件可以使用正常的props將該狀態下傳到結果組件。

檢查一下這個檔案。https://vuejs.org/v2/guide/components-custom-events.html

一定要特別注意檔案中的.sync部分，并確定這是否也是你需要實作的東西。

除非您想使用像 vuex 這樣更復雜的狀態管理庫（在這種情況下應該沒有必要），否則您只需將狀態保存在一個共同的父類中，并使用 $emit 來向上傳遞，并使用 props 來向下傳遞。

標籤：

上一篇：禁用按鈕，直到回應VUE

下一篇：如何制作將顯示在所有QWizardPages上而不在每個頁面中復制它的小部件？