The problem of multiple parent components sharing the same child component in vue

problem description

above:
Page 1:

currently have these two pages, because the layout format is the same, so I extracted into a single file component, the data of the two pages are not the same, how should I pass parameter values to this child component in different parent components? How should it be received in the sub-component?

the environmental background of the problems and what methods you have tried

at present, I take the same variable names passed by the two parent components and then pass them over. I always feel that there is a problem. If the data formats that the two components need to pass are not the same, there will be a problem

related codes

/ / Please paste the code text below (do not replace the code with pictures)
my current code is as follows:

Sub-component:

<template lang="html">
  <div class="">
    <div class="home-content">
      <router-link tag="div" :to="{ name: userFund.left.path, params: {} }" class="shareActivity">
        <div class="home-content-tit">
          {{userFund.left.title}}
        </div>
        <div class="home-content-tips">
          {{userFund.left.tips}}
        </div>
      </router-link>
      <router-link tag="div" :to="{ name: userFund.right.path, params: {} }" class="currentAmount">
        <div class="home-content-tit">
          {{userFund.right.title}}
        </div>
        <div class="home-content-tips">
          {{userFund.right.tips}}
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserFund",
  data() {
    return {
      userFund:this.$attrs.userFund
    }
  }
}
</script>

Page 1:

<!--  -->
<template lang="html">
  <div class="">
    <Header :title="title"/>
    <div class="gray-body">

      <div class="userAll">
        <div class="userAll-tit">
          
        </div>
        <div class="userAll-num">
          23197.23
        </div>
      </div>

      <UserFund :userFund="userFund"/>
      <HomeBid />
    </div>
    <Footer />
  </div>

</template>

<script>
import Header from "@/components/header/header.vue"
import Footer from "@/components/footer/footer.vue"
import HomeBid from "./home_bid.vue"
import UserFund from "@/components/common/userFund.vue"

export default {
  name: "Home",
  components: {
    Header,
    Footer,
    HomeBid,
    UserFund
  },
  data() {
    return {
      title: "",
      userFund: {
        left: {
          title: "",
          tips: "",
          path: "share"
        },
        right: {
          title: "",
          tips: "0.00",//
          path: "current"
        }
      }
    }
  }
}
</script>

Page 2:

<!--  -->
<template lang="html">
  <div class="">
    <Header :title="title"/>
    <div class="gray-body">
      <div class="pledge">
          <img src="../../assets/images/pledge.png" alt="">
      </div>
      <UserFund :userFund="userFund"/>
      <FattenList/>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "@/components/header/header"
import Footer from "@/components/footer/footer"
import UserFund from "@/components/common/userFund.vue"
import FattenList from "./fatten_list.vue"

export default {
  name: "Fatten",
  components: {
    Header,
    Footer,
    UserFund,
    FattenList
  },
  data() {
    return {
      title: "",
      userFund: {
        left: {
          title: "",
          tips: "0.00",//
          path: "balance"
        },
        right: {
          title: "",
          tips: "",//
          path: "autoInvest"
        }
      }
    }
  }
}
</script>