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

problem description

above:
Page 1:

2:

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>
Jun.21,2021

is not actually public, it just instantiates a prototype component. So there are no multiple parent components passed to a child component, and it should be understood that the same child component is instantiated under each parent component. If you want to change the way, you can use the slot tag, in fact, the principle is the same as the parameters passed to determine the rendering is the same.


if the delivery format is different, you can add another passed parameter, and then judge it in the sub-component and then render

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf326e-14395.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf326e-14395.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?