账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue props传给子组件得不到值
    33
    0

    父组件

     <index-map map-name="index-map" :pro-data="mapArr" :maker-data="listData" :marker-id.sync='markerId' :apply-flag.sync="statusModal" @marker-tap="markerTap"></index-map>

    data() {

    mapArr:[],

    }

    proChange(params){
      let mapArr;
      this.prolistData.forEach((item, i) => {
        if (item.areaid == this.params.proid) {
          mapArr = item;
        }
      });
      console.log("mapArr",mapArr);
    },
    

    子组件

    props: ["makerData", "markerId", "mapName","proData", "applyFlag"],
    watch: {
      proData: function(val, oldVal) {
        console.log("====41",val);
        if (val) { 
          this.mapPosition(this.proData);
        }
      },
    },
     mapPosition(mapArr) {
        console.log(mapArr);
         this.map.centerAndZoom(new T.LngLat(mapArr.longitude, mapArr.latitude), mapArr.zoom);
      },

    mapPosition 我在父组件改变mapArr 的值子组件mapPosition这个方法不执行

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 不想般配 普通会员 1楼

      在Vue中,props是通过组件的props属性来传递数据到子组件的。如果在子组件中尝试将props属性传递给父组件,但是接收器没有收到值,可能有以下几种原因:

      1. 父组件未定义props属性: 如果父组件在子组件中定义了props属性,但没有在子组件中提供一个获取props属性的函数,那么在子组件中尝试访问父组件的props属性将返回undefined。你可以通过在子组件的props属性声明中包含一个获取props属性的函数,如:

      html props: { // 子组件的props属性 parentProps: { get prop() { // 获取父组件的props属性的函数 return this.$parent.prop; }, }, },

      在父组件中,可以通过props属性的getter函数获取子组件的props属性:

      ```javascript // 父组件

      ```

      1. props属性的getter函数未返回值: 如果props属性的getter函数返回的值为undefined,那么在子组件中尝试访问父组件的props属性将返回undefined。这可能是因为getter函数的返回值被设置为undefined,或者在props属性的setter函数中未将getter函数作为参数传递给setter函数。

      例如:

      ```javascript // 父组件

      ```

      在这个例子中,prop的getter函数被设置为value,但是未传递给setter函数,所以设置this.$parent.prop时,实际上是将value赋值给prop,而不是获取prop的值。

      1. prop类型错误: 如果props属性的类型与子组件期望的类型不匹配,那么在子组件中尝试访问父组件的props属性将抛出类型错误。例如,如果子组件期望的props属性类型是字符串,而实际获取的props属性类型是数字,那么在子组件中尝试访问父组件的props属性将抛出类型错误。

      例如:

      ```javascript // 子组件

      ```

      在这个例子中,prop的类型是字符串,而实际获取的props属性类型是数字,所以尝试访问this.$parent.prop时将抛出类型错误。

      1. props属性在子组件被销毁: 如果子组件被销毁,其props属性将被销毁。如果在子组件中尝试访问父组件的props属性,但在子组件被销毁后,没有在父组件中调用props属性的getter函数,那么将无法获取到父组件的props属性的值。

      例如:

      ```javascript // 子组件

      ```

      在这个例子中,由于子组件被销毁,其props属性将被销毁,所以在子组件被销毁后,无法获取到父组件的props属性的值。

      要解决上述问题,可以尝试以下几种方法:

      • 在子组件中,确保props属性在子组件被销毁时仍然存在,或者在子组件被销毁后调用props属性的getter函数。例如,可以将props属性设置为一个类变量,或者在子组件被销毁时进行内存清理。
      • 如果props属性的类型与子组件期望的类型不匹配,尝试使用Vue的@input指令来处理属性类型不匹配的情况。例如,可以设置prop的类型为字符串,然后在子组件中使用@input指令将其转换为预期的类型。
      • 如果props属性在子组件被销毁后仍然存在,但是尝试访问父组件的props属性的getter函数时仍然返回undefined,可以检查props属性是否已经被正确地设置和使用。例如,可以检查props属性是否已经被赋值,或者在props属性的setter函数中是否正确地传递了getter函数的参数。如果props属性已经正确地设置和使用,那么可能需要检查getter函数的返回值是否为undefined。
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部