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

Question

子组件是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>

Answer 1

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