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

【问题标题】：Why in vuejs2 is my default prop not passed to my child component?为什么在 vuejs2 中我的默认道具没有传递给我的子组件？
【发布时间】：2021-06-24 10:07:27
【问题描述】：

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

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

<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 警告]：渲染错误：“TypeError：无法读取未定义的属性“纬度”

发现于

---> 在 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）提供一个默认值，还是会导致冲突？

欢迎任何帮助。

【问题讨论】：

你能发布你的 app.vue 吗？

标签： javascript vuejs2 leaflet

【解决方案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"
/>

【讨论】：