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>