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

问题描述

先上图:
页面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>

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注