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

最新推荐文章于 2023-05-31 17:25:34 发布

C_SDNY1

最新推荐文章于 2023-05-31 17:25:34 发布

阅读量691

点赞数 1

分类专栏： vue组件使用文章标签： javascript vue.js html5 前端

本文链接：https://blog.csdn.net/weixin_50116003/article/details/114828590

版权

本文详细介绍了在Vue.js中父子组件之间的数据传递和函数调用，包括父组件如何通过props传值给子组件，子组件如何使用$emit向父组件发送事件来传递值，以及父组件如何通过ref或事件监听调用子组件的方法，同时子组件也可以通过this.$parent调用父组件的方法。涵盖了多种常见实践场景和代码示例。

摘要由CSDN通过智能技术生成

父子组件传值

父组件传值给子组件

父组件代码部分：

<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>
    <div class="app">
        <Child @child-method="fatherMethod"></Child>
    </div>
</template>
<script>
import Child from './child.vue'
export default {
   
    data () {
   
        return {
   
            
        }
    },
    components