父组件 - 子组件传参及调用函数问题

父子组件传值

父组件传值给子组件

父组件代码部分：

<template>
    <div class="app">
    //等号左侧是子组件定义的名字（驼峰变成 - 的形式），等号右侧是父组件的名字
        <Design :table-data="fTableData :text="fText"/>
    </div>
</template>
<script>
import Design from "./ProDesign";
export default {
   
  components: {
    Design },
  data() {
   
    return {
   
    fTableData:[{
   
      name: '大名'
    },{
   
      name: '小名'
    }],
    text: '父组件传给子组件的数据'
    }
  },
  methods: {
   
  
  }
}
</script>

子组件代码部分：

<template>
 <div>
  //接收数组
  <el-table :data="tableData" >
    <el-table-column prop="name" label="名字"></el-table-column>
  </el-table>
  //接收字符串
  <el-input v-model="text"></el-input>
 </div>
</template>
<script>
export default {
   
  name: "ProDesign",
  //这里定义的props获取父组件传递过来的值
  props: {
   
  tableData: {
   
    type: Array,
    default: []
  },
  text: {
   
    type: String,
    default: ""
  }
</script>

子组件传值给父组件

父组件代码部分：

<template>