单项数据流之子组件修改父组件的值

最新推荐文章于 2023-06-12 16:53:49 发布

cv酱

最新推荐文章于 2023-06-12 16:53:49 发布

阅读量259

点赞数

分类专栏：前端文章标签：前端 javascript java

本文链接：https://blog.csdn.net/yinguser/article/details/125450627

版权

通常在前端开发中，子组件无法直接修改父组件的值，因为这违反了单项数据流的原则。然而，在某些场景下，这种需求是存在的。本文将分享一种解决方法，允许子组件在不报错的情况下更新父组件的布尔值状态。对于其他类型的数据，此方法可能需要进一步验证。更多细节和示例将在后续进行补充。

摘要由CSDN通过智能技术生成

一般情况下，父传子，在子组件中是不能够修改父组件的值的，修改就回报错，但是有时候有想修改，那么怎么办呢？经过我不写的努力，终于找到解决办法了、、、、

**** 父组件 ***

这是我的父组件传了一个布尔值，
<scrollToTop :isFirstPage="isFirstPage" />


data() {
    return {
      isFirstPage:false,
    };
  },




***子组件***

<template>
  <div class="ScrollToTop_components" v-if="isFirstPage">
    <img @click="scrollToTop" class="icon" src="../../../assets/images/Result_to_top_icon.png" alt />
  </div>
  <div class="topcontrol_first" title="返回顶部" @click="scrollToTop" v-else>
    <div class="topcontrol_two">
      <div class="topcontrol_last"></div>
    </div>
  </div>
</template>

// 接收 
 props: {
   
    isFirstPage: {
      type: Boolean,
      default: true,
    },
  },
 data