为什么在 vuejs2 中我的默认道具没有传递给我的子组件？

Question

试图在从 API 点获取所需数据之前将默认值传递给我的子组件。但是我没有这样做，想知道为什么？

我的子组件恰好是 Leaflet 地图，并且正在向它传递一些国家坐标，例如纬度和经度。我这样做：

<template>
  <div class="home">
    <LeafletMap
      :latitude="countryStats.countryInfo.lat || 0"
      :longitude="countryStats.countryInfo.long || 0"
    />
  </div>
</template>

或者像这样：

<template>
  <div class="home">
    <LeafletMap
      :latitude="countryStats.countryInfo.lat ? countryStats.countryInfo.lat : 0"
      :longitude="countryStats.countryInfo.long ? countryStats.countryInfo.long : 0"
    />
  </div>
</template>

但这两种方法似乎都行不通。

我只得到：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'lat' of undefined"

found in

---> at src/components/home/Home.vue

这是我的子组件：

<template>
  <div class="map">
    <h1>World Map</h1>
    <div id="mapContainer">
      <l-map
        style="height: 80%; width: 100%"
        :zoom="zoom"
        :center="center"
        @update:zoom="zoomUpdated"
        @update:center="centerUpdated"
        @update:bounds="boundsUpdated"
      >
        <l-tile-layer :url="url"></l-tile-layer>
      </l-map>
    </div>
  </div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "vue2-leaflet";

export default {
  name: "LeafletMap",
  components: {
    LMap,
    LTileLayer
  },
  props: {
    latitude: {
      type: Number,
      default: 0
    },
    longitude: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      zoom: 4,
      center: [this.latitude, this.longitude],
      bounds: null
    };
  },
  methods: {
    zoomUpdated(zoom) {
      this.zoom = zoom;
    },
    centerUpdated(center) {
      this.center = center;
    },
    boundsUpdated(bounds) {
      this.bounds = bounds;
    }
  }
};
</script>

<style src="./LeafletMap.css" scoped />

想知道，如果我仍然应该在我的子组件中为我的道具（latitude 和 longitude）提供默认值，否则会引起冲突吗？

欢迎任何帮助。

Answer 1

正如 ViniciusSilveiraAlves 所暗示的，问题不在您的子组件 (LeafletMap) 中，而是在您的父组件 (Home) 中。

很可能它有一个 countryStats 数据项，它被分配了一个空对象 {} 作为初始值。因此在模板中，当您尝试读取 countryStats.countryInfo.lat 时，countryInfo 成员未定义，并且尝试获取其 lat 成员会生成您的错误消息（并且您的三元组发生得太晚而无法阻止它）。

一个非常简单的解决方案，如果这个值在您的情况下有意义，那就是用更完整的值初始化 countryStats：

export default {
  name: "Home",
  data() {
    return {
      countryStats: {
        countryInfo: {} // Just enough so that template gets a defined countryInfo
      }
    };
  }
}

如果出于某种原因您确实需要一个空的初始 countryStats 对象，那么只需改进模板中的条件，首先确保 countryStats.countryInfo 已定义：

<LeafletMap
  :latitude="countryStats.countryInfo && countryStats.countryInfo.lat || 0"
  :longitude="countryStats.countryInfo && countryStats.countryInfo.long || 0"
/>

为什么在 vuejs2 中我的默认道具没有传递给我的子组件？

Why in vuejs2 is my default prop not passed to my child component?

javascript

leaflet

vuejs2