如何在提交表单后刷新页面？

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中，这将导致组件重新加载并再次调用创建的()。查看路由器api 这里中的嵌套路由。
2. 你可以用观察者。因为您想知道这两种情况是否发生了变化，所以您可能希望查看包含两者的计算属性。在AppRequest组件中放置：computed: { combined() { this.keywords && this.time} }和watch: { combined() { makeApiRequest() } }