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（）中进行调用。还有一些解决方案。

您可以使用子组件/嵌套路由，因此在提交时将其作为查询参数添加到URL，这将导致组件重新加载，并且created（）将再次被调用。在Router api here
您可以使用观察者。由于您想知道是否更改，因此您可能希望观看包含它们的计算属性。在AppRequest组件中放入：computed: { combined() { this.keywords && this.time} }和watch: { combined() { makeApiRequest() } }

提交表格后如何刷新页面？

1 个答案: