使用来自 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})$/gmiexport 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”应用程序.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>我已经阅读了一些关于 $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" />

<script>在里面App.vue：

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>