技术不行但人小帅 2022-03-28 11:12 采纳率: 59.2%
浏览 145
已结题

Vue父子组件接收不到或是刷新丢失?

进入页面时无法获取到内容。

img


/* 
 1.@param res 数据内容,
 2.@pageNum 每页多少条
*/

<template>
  <div>
    <slot :content="items"></slot>
    <b-col v-if="loading">
      <span>加载中...</span>
    </b-col>
    <b-col v-if="noMore">
      <span>无更多数据</span>
    </b-col>
  </div>
</template>

<script>
export default {
  name: "myScroll",
  props: {
    thedata: { type: Array, default: () => [] }
  },
  data() {
    return {
         page: 1, //当前页数
      pageNum: 5, //每页5条
      loading: false,
      noMore: false,
      totalcount: "",
       items:[],
     
    };
  },
  methods: {
    init: function() {
        // console.log(this.thedata)
          this.totalcount=this.thedata;
        if (this.thedata.length <= this.pageNum) {
          this.items = this.totalcount;
        //   console.log(this.items);
          this.noMore = true;
        } else {
          this.items = this.thedata.slice(0, this.pageNum);
          this.loading = true;
        //   console.log(this.items);
        }
      
    },
    loadMore: function() {
      this.page++;
      let begin = this.pageNum * this.page - this.pageNum;
      let end = this.pageNum * this.page;
      if (end >= this.totalcount.length) {
        end = this.totalcount.length;
        this.noMore = true;
        this.loading = false;
      } else {
        let end = this.pageNum * this.page;
      }
      let data = [];
      data = [...this.items, ...this.totalcount.slice(begin, end)];
      this.items = data;
    }
  },
  mounted() {
      console.log(this.thedata)
    this.init();
    window.addEventListener("scroll", () => {
      const scrollY =
        document.body.scrollTop || document.documentElement.scrollTop; // 滚动条在Y轴上的滚动距离
      const compatibility =
        document.compatMode === "CSS1Compat"
          ? document.documentElement.clientHeight
          : document.body.clientHeight; // clientHeight 属性是一个只读属性,它返回该元素的像素高度,高度包含内边距(padding),不包含边框(border),外边距(margin)和滚动条,是一个整数,单位是像素 px。
      const TotalHeight = Math.max(
        document.body.scrollHeight,
        document.documentElement.scrollHeight
      ); // 页面总高度
      if (scrollY + compatibility >= TotalHeight) {
        // 当滚动条滑到页面底部
        this.loadMore();
      }
    });
  },

//在这里尝试监听,无法成功。
  watch:{
        thedata(val){
            this.thedata=val;
            // console.log(val);
        },
        totalcount(val){
            this.totalcount=val
        },
        items(val){
            this.items=val
        },
        immediate:true,
  },
 created() {
    //  console.log(this.totalcount)  
     console.log(this.thedata)
    //  console.log(this.itemss)
  },








父组件
<myScroll :thedata="thedata">
       <template v-slot="{content}">
               <b-row class="topic">
        <b-col class="contentNumber">
          共有
          <font color="red">{{content.length}}</font>条公告
        </b-col>
        <b-col class="btnNew">
          <b-button variant="success" @click="newA">新增公告</b-button>
        </b-col>
      </b-row>
          <div class="con" v-for="(item, id) in content" :key="item.id">
        <b-row class="con-model">
          <b-col cols="6">
            <a href="javascript:0" @click="detalis(id)">{{item.topic}}</a>
          </b-col>
          <b-col class="top-name" cols="3">
            <b-icon icon="person 
" class="icon-position"></b-icon>
            {{item.user}}
          </b-col>
          <b-col class="top-date" cols="3">
            <b-icon icon="clock
" class="icon-position"></b-icon>
            {{item.date}}
          </b-col>
        </b-row>
        <div class="con-bot" id="contentHeight" ref="contentHeight">{{item.content}}</div>
        <div class="content-button">
          <b-button class="contentbtn" v-b-modal.modal-1 variant="danger" @click="btnDelet(id)">删除</b-button>
          <b-button class="contentbtn" variant="warning" @click="btnEdit(id)">编辑文章</b-button>
        </div>
      </div>

       </template>
    </myScroll>

 allAnnounce().then(res => {
        this.thedata=res.data;
        // console.log(this.thedata)
      });
};
</script>




当子组件随便console后数据又出来了,重新刷新后数据又丢失。此后不管任何方式都无法显现,除非重新在子组件中随意修改某项代码,重新让页面渲染后又有数据,此后刷新又消失

img

请问有什么好的解决办法?

展开全部

  • 写回答

2条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-03-28 11:29
    关注

    父子组件的加载顺序

    父created->子created->子mounted->父mounted

    看你的请求顺序 监听效果

    img

    这样就死循环了 一直在变更 一直在变更

    你直接在子组件定义一个值让这个子组件去 = thedata 或者就直接渲染 thedata watch 做个this.$focusUpdate

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 4月4日
  • 已采纳回答 3月28日
  • 修改了问题 3月28日
  • 修改了问题 3月28日
  • 展开全部

悬赏问题

  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
  • ¥15 C#i编程中so-ir-192编码的字符集转码UTF8问题
  • ¥15 51嵌入式入门按键小项目
  • ¥30 海外项目,如何降低Google Map接口费用?
  • ¥15 fluentmeshing
  • ¥15 手机/平板的浏览器里如何实现类似荧光笔的效果
  • ¥15 盘古气象大模型调用(python)
  • ¥15 传人记程序做的plc 485从机程序该如何写
  • ¥15 已知手指抓握过程中掌指关节、手指各关节和指尖每一帧的坐标,用贝塞尔曲线可以拟合手指抓握的运动轨迹吗?