Javascript 将来自axios get的数据用作另一个Vue文件的道具

我有一些代码将计算机的ip地址解析为lat/long，如下所示

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>

const axios=require（'axios'）。默认值；
常量ipRegex=/ip=（\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}）$/gmi
导出默认值{
名称：“ip”，
道具：{
ip:字符串，
拉特：弦，
长：字符串
},
挂载（）{
axios.get（）https://www.cloudflare.com/cdn-cgi/trace')
。然后（响应=>(
this.ip=ipRegex.exec（response.data）[1]
)
.那么(
axios.get（）https://cors-anywhere.herokuapp.com/http://api.ipstack.com/“+this.ip+”？访问密钥=”）
。然后（响应=>(
this.lat=response.data.latitude，
this.long=response.data.longitude
)
)
)
)
}
}

我想将lat/long“返回”到App.Vue，在那里它会将lat/long作为道具传递给“Weather.js”

App.Vue

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

从“./components/Weather.vue”导入天气
从“./components/ip_resolve.vue”导入ip
导出默认值{
名称：“应用程序”，
组成部分：{
天气，
知识产权
}
}

我读过一些关于$emit的书，但是我不熟悉设计范例，也不知道如何实现它。有人能给我一些最佳实践吗

---

谢谢，

在您的

ip_解析中。vue

从axios获取数据后，使用此选项发出事件：

this.$emit（'response'{
lat:response.data.latitude，
long:response.data.longitude
}

然后在你的

App.vue

中：

以及

App.vue

中的

内部：

导出默认值{
名称：“应用程序”，
数据（）{
返回{
纬度：0，
长：0
}
},
组成部分：{
天气，
知识产权
},
方法：{
onResponse（$event）{
this.lat=$event.lat
this.long=$event.long
}
}
}

你就快到了

这是如何在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>

const axios=require（'axios'）。默认值；
常量ipRegex=/ip=（\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}）$/gmi
导出默认值{
名称：“ip”，
道具：{
ip:字符串
},
挂载（）{
axios.get（）https://www.cloudflare.com/cdn-cgi/trace')
.然后（功能（响应）{
this.ip=ipRegex.exec（response.data）[1]
返回axios.get（'https://cors-anywhere.herokuapp.com/http://api.ipstack.com/“+this.ip+”？访问密钥=”）
})
.然后（功能（响应）{
此.$emit（'change'{
lat:response.data.latitude，
long:response.data.longitude
})
})
}
}

然后是如何接收并将其推送到天气组件：

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

从“./components/Weather.vue”导入天气
从“./components/ip_resolve.vue”导入ip
导出默认值{
名称：“应用程序”，
组成部分：{
天气，
知识产权
},
数据：（）=>({
lat:null，
long:null，
}),
方法：{
更新单词（coords）{
this.lat=coords.lat
this.long=coords.long
}
}
}

你不在App.vue中安装/axios有什么原因吗？这会简化事情。如果你在ip和天气组件中都需要，你可以通过道具将值传递给ip和天气组件。