新手求问，Vue父组件向子组件传数据，子组件获取不到。

子组件是elementUI的card组件Card

<template>
  <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>测试卡片</span>
    <el-button style="float: right; padding: 3px 0" type="text" id="c" @click='c1'>操作按钮</el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    {{'测试内容 ' + o }}
  </div>
</el-card>
</template>
<script>
export default {
  name:'card',
  props:['sendData'],
  methods:{
    c1(){
    this.$router.replace(this.sendData)
    }
  }
  }
</script>

父组件将子组件重复利用6次，但子组件按钮需要分开绑定不同的事件，跳转到不同页面，所以需要从父组件传入页面地址，但是子组件无法拿到地址。

下面是父组件test

<template>
<div id="app">
    <el-container>
      <el-header class="head" style="height:120px" >
        <Tittle></Tittle>
      </el-header>
      <el-main>
        <el-row>
          <Form></Form>
          <Card id='c1' sendData='sendData'></Card>
          <Card></Card>
          <Card></Card>
          <Card></Card>
          <Card></Card>
          <Card></Card>
        </el-row>
      </el-main>
    </el-container>
        <router-link to="index"><button>test</button></router-link>
    </div>

</template>
<script>

import card from '@/components/card.vue'
import tittle from '@/components/tittle.vue'
import form from'@/components/form-c.vue'
import Vue from 'vue'
new Vue({
  el:'#c1',
  data:{
    sendData:'index'
  }
})
export default {
  components: {
    'Tittle' : tittle,
    'Card' : card,
    'Form' : form
   }
}
</script>

你是要获取父组件的值，还是要获取子组件的值？通过函数获取。

父给子传，用props就行了。

父传子只需要用props很简单父组件引用子组件，在子组件标签上绑定需要传的参数，子组件用props接收就好了

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y