vue中多个父组件共用同一个子组件传值问题

Question

问题描述

先上图：
页面1：

页面2：

目前有这两个页面，因为布局格式都一样，于是我抽取成了单文件组件，两个页面的数据都不一样，我应该怎样在不同的父组件中给这个子组件传递参数值？子组件中又该怎么接收？

问题出现的环境背景及自己尝试过哪些方法

我目前把两个父组件传递的变量名都取的同一个然后传递过去的，总感觉有点问题，如果两个组件需要传递的数据格式不一样的话就会出问题了

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
我目前的代码如下：

子组件：

<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>

页面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>

页面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>

Answer 1

传递格式不一样的话可以再加一个传递的参数，再子组件中判断一下再渲染

Answer 2

实际上并不是公用，是实例化了一个原型组件罢了。所以不存在多个父组件传递给一个子组件，应该理解为每个父组件下都实例化了一个相同的子组件。如果你想换别的方式，可以用slot标签，其实原理也是跟传递的参数判断渲染是一样的。