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

Posted 2023-02-23

【中文标题】为啥在 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 吗？

【参考方案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"
/>