提交表單后如何刷新頁面？

Question

我在模板中有兩個組件，第一個是過濾器，第二個是向 API 發出請求。 我想知道提交第一個（過濾器）后是否可以刷新第二個組件（請求）的值

在主頁中，請求具有默認值，如果用戶使用過濾器，則請求必須更改為用戶插入的值

<template>
<app-filter></app-filter>
<app-request :time="time" :keyword=keyword />
</template>

<script>
export default {
  components:{
        "app-request": Request,
        "app-filter": Filter
    },
  data() {
        return {
            keyword: "Hello",
            time:"today",
        }
    }
  }
</script>

過濾器將更改關鍵字和時間的默認值

<template>
<form @submit.prevent="submit">
<input v-model="keyword" class="input" type="text">
<input v-model="time" class="input" type="text">
<button type="submit">send</button>
</form>
</template>

<script>
export default {
  data() {
        return {
            time:"",
            keyword: "",
        }
    },
    methods:{
        submit(){
          //what i do here to change the value in request?
        }
    },
}
</script>

請求將顯示來自 API 的值，請求頁面將從主頁面接收道具

<template>
<div :time="time"></div>
</template>

<script>
export default {
  props:[
        'keywords',
        'time',
  ],
  create(){
    //make a request to api, here is ok
  }
}
</script>

如何在過濾器組件中提交表單后刷新主頁？

Answer 1

一種簡單的方法是讓父級處理與某些事件的通信。

在父級中：

<app-filter @applied="filtersApplied"></app-filter>

和

methods: {
  filtersApplied (filters) {
    this.keyword = filters.keyword
    this.time = filters.time
  }
}

在 AppFilter 組件中：

submit () {
  this.$emit('applied', { keyword: this.keyword, time: this.time })
}

編輯我注意到你在談論你如何在 created() 中進行調用。 還有一些解決方案。

1. 您可以使用子組件/嵌套路由，因此在提交時將它們作為查詢參數添加到 URL 中，這將導致組件重新加載並再次調用 created()。 在此處查看路由器 api 中的嵌套路由
2. 您可以使用觀察者。 由於您想知道其中任何一個是否發生變化，您可能想要查看包含它們的計算屬性。 在 AppRequest 組件中放置：calculated: computed: { combined() { this.keywords && this.time} }和watch: { combined() { makeApiRequest() } }