使用 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>