使用来自 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”

应用程序.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', {&nbsp; lat: response.data.latitude,&nbsp; long: response.data.longitude}然后在你的App.vue：<ip @response="onResponse"></ip><Weather :lat="lat" :long="long" /><script>在里面App.vue：export default {&nbsp; name: 'App',&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; lat: 0,&nbsp; &nbsp; &nbsp; long: 0&nbsp; &nbsp; }&nbsp; },&nbsp; components: {&nbsp; &nbsp; Weather,&nbsp; &nbsp; ip&nbsp; },&nbsp; methods: {&nbsp; &nbsp; onResponse($event) {&nbsp; &nbsp; &nbsp; this.lat = $event.lat&nbsp; &nbsp; &nbsp; this.long = $event.long&nbsp; &nbsp; }&nbsp; }}

Answer 2

你快到了。这是您可以在 ip 组件上发出数据的方式：<script>const axios = require('axios').default;const ipRegex = /ip=(\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3})$/gmiexport default {&nbsp; name: 'ip',&nbsp; props : {&nbsp; &nbsp; ip: String&nbsp; },&nbsp; mounted () {&nbsp; &nbsp; axios.get('https://www.cloudflare.com/cdn-cgi/trace')&nbsp; &nbsp; .then(function(response) {&nbsp; &nbsp; &nbsp; &nbsp;this.ip = ipRegex.exec(response.data)[1]&nbsp; &nbsp; &nbsp; &nbsp;return axios.get('https://cors-anywhere.herokuapp.com/http://api.ipstack.com/'+this.ip+'?access_key=<key>')&nbsp; &nbsp; })&nbsp; &nbsp; .then(function(response) {&nbsp; &nbsp; &nbsp; &nbsp; this.$emit('change', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;lat : response.data.latitude,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;long : response.data.longitude&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; }}</script>然后是您如何接收并将其推送到您的天气组件：<template>&nbsp; <div id="app">&nbsp; &nbsp; <img alt="Vue logo" src="./assets/logo.png">&nbsp; &nbsp; <ip @update="updateCoords"></ip>&nbsp; &nbsp; <weather :lat="lat" :long="long" />&nbsp; </div></template><script>import Weather from './components/Weather.vue'import ip from './components/ip_resolve.vue'export default {&nbsp; name: 'App',&nbsp; components: {&nbsp; &nbsp; Weather,&nbsp; &nbsp; ip&nbsp; },&nbsp; data : () => ({&nbsp; &nbsp; lat : null,&nbsp; &nbsp; long : null,&nbsp; }),&nbsp; methods : {&nbsp; &nbsp; updateCoords (coords) {&nbsp; &nbsp; &nbsp; this.lat = coords.lat&nbsp; &nbsp; &nbsp; this.long = coords.long&nbsp; &nbsp; }}}</script>