vue组件之间传值，父传子props，子传父$emit

最新推荐文章于 2022-10-30 22:58:13 发布

原创最新推荐文章于 2022-10-30 22:58:13 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

前端同时被 2 个专栏收录

51 篇文章

订阅专栏

Vue

8 篇文章

订阅专栏

本文介绍了Vue.js中父组件向子组件传递数据的方法，通过props实现数据绑定；同时也讲解了子组件如何通过$emit向父组件发送事件及数据，帮助开发者更好地理解和应用Vue组件间的通信机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、父组件向子组件传值，通过props

（1）使用方式一：

参考：

https://blog.youkuaiyun.com/qq_42492055/article/details/82558971

（2）使用方式二：

使用elementUI的table组件作为子组件，父组件向table传数据：

思路：el-table绑定自身数据tableData，在页面初始化时或watch监控props改变时调用方法，将父组件的props里的tidedata赋给tableData

<template>
  <el-table
    :data="tableData"
    height="350"
    border
    style="width: 100%">
    <el-table-column
      prop="name"
      label="观潮地点">
    </el-table-column>
    。。。
  </el-table>
</template>

<script>
export default {
  props:{
    tidedata: {
      type: Array,
      default: () => []
    },
  },
  data(){
    return{
      tableData: [],
    }
  },
  methods:{
    reloadTable(){
      this.tableData = this.tidedata;
    }
  },
  mounted(){
    this.reloadTable();
  },
  watch:{
    tidedata(){
      this.reloadTable();
    },
    deep:true
  }
}
</script>

二、子组件向父组件传值，通过$emit

查阅官网