VueJS用户mount（）处于新的单击/重置组件状态？

Question

我在同一页面上拥有2个组件： 1.项目清单 2.灯箱，经典的html灯箱，没有任何其他vuejs组件

我将trought prop我的商品ID传递到了灯箱，它有效，如果我单击商品，我会看到正确的值。

我的想法是使用mount（）发出请求并在每次调用时获取其他数据，但我发现这是不可能的，并且mount仅在页面重载时运行。

是否有一种方法可以重置组件状态并在每次调用时挂载？

Answer 1

创建一个函数，该函数将为您提出请求，即，每次单击该项目时都会发出请求，然后通过prop将数据传递给组件。如果要在挂载中使用此功能，只需使用此功能调用它。请勿将其束缚在已安装的内部，否则每次都会为该组件充电，而是通过事件将其链接。

示例：

<div id="app">
  {{ info }}
    <button @click="getData">Get Data</button>
    <button @click="clear">clear</button>
</div>
new Vue({
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  methods: {
    clear() {
      this.info = null
    },
    getData() {
      axios
        .get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(response => {
           this.info = response
        })
      }
    },
  mounted() {
    this.getData()
  }
})

https://jsfiddle.net/hamiltongabriel/nazvruLj/7/