使用 axios get 中的數據作為另一個 Vue 文件的道具

Question

我有一些代碼可以將計算機的 ip 地址解析為經緯度，就像這樣

ip_resolve.vue

<script>
const axios = require('axios').default;
const ipRegex = /ip=(\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3})$/gmi
export default {
  name: 'ip',
  props: {
    ip: String,
    lat: String,
    long: String
  },
  mounted () {
    axios.get('https://www.cloudflare.com/cdn-cgi/trace')
    .then(response => (
        this.ip = ipRegex.exec(response.data)[1]
    )
    .then(
        axios.get('https://cors-anywhere.herokuapp.com/http://api.ipstack.com/'+this.ip+'?access_key=<key>')
        .then( response => (
            this.lat = response.data.latitude,
            this.long = response.data.longitude
            )
        )
    )
    )
  }
}
</script>

我想將緯度/經度“返回”到 App.Vue，它會將緯度/經度作為道具傳遞給“Weather.js”

應用程序

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <ip></ip>
    <Weather lat={{lat}} long={{long}} />
  </div>
</template>

<script>
import Weather from './components/Weather.vue'
import ip from './components/ip_resolve.vue'

export default {
  name: 'App',
  components: {
    Weather,
    ip
  }
}
</script>

我已經閱讀了一些關於 $emit 的內容，但我不熟悉設計范式，也不知道如何實現它。 有人可以在這里為我提供一些最佳實踐嗎？

謝謝，

Answer 1

在您的ip_resolve.vue使用它在從 axios 獲取數據后發出事件：

this.$emit('response', {
  lat: response.data.latitude,
  long: response.data.longitude
}

然后在你的App.vue ：

<ip @response="onResponse"></ip>
<Weather :lat="lat" :long="long" />

在App.vue <script>中：

export default {
  name: 'App',
  data() {
    return {
      lat: 0,
      long: 0
    }
  },
  components: {
    Weather,
    ip
  },
  methods: {
    onResponse($event) {
      this.lat = $event.lat
      this.long = $event.long
    }
  }
}

Answer 2

你快到了。

這是您如何在 ip 組件上發出數據：

<script>
const axios = require('axios').default;
const ipRegex = /ip=(\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3})$/gmi
export default {
  name: 'ip',
  props : {
    ip: String
  },
  mounted () {
    axios.get('https://www.cloudflare.com/cdn-cgi/trace')
    .then(function(response) {
       this.ip = ipRegex.exec(response.data)[1]
       return axios.get('https://cors-anywhere.herokuapp.com/http://api.ipstack.com/'+this.ip+'?access_key=<key>')
    })
    .then(function(response) {
        this.$emit('change', {
           lat : response.data.latitude,
           long : response.data.longitude
          })
        })
  }
}
</script>

然后您如何接收並將其推送到您的天氣組件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <ip @update="updateCoords"></ip>
    <weather :lat="lat" :long="long" />
  </div>
</template>

<script>
import Weather from './components/Weather.vue'
import ip from './components/ip_resolve.vue'

export default {
  name: 'App',
  components: {
    Weather,
    ip
  },
  data : () => ({
    lat : null,
    long : null,
  }),
  methods : {
    updateCoords (coords) {
      this.lat = coords.lat
      this.long = coords.long
    }
}
}
</script>