vue中子组件和父组件之间的对象传递

最新推荐文章于 2025-06-18 15:33:42 发布

夭桃鸣鹿

最新推荐文章于 2025-06-18 15:33:42 发布

阅读量7.5k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 子组件父组件

本文链接：https://blog.youkuaiyun.com/weixin_43302988/article/details/95613816

vue 专栏收录该内容

7 篇文章

订阅专栏

博客介绍了Vue中父子组件间的数据传递。父组件index.vue可将定义的updateAddress对象传递给子组件addressToast.vue；子组件中定义info对象，可通过emit传值给父组件，父组件监听相应事件即可接收。

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

父组件是index.vue，子组件是addressToast.vue

父组件传递给子组件

父组件代码代码：

//  父组件import引入子组件（子组件路径要对）
import addressToast from '@/components/addressToast'
//  在component中加载组件
components: {
    addressToast
  },
 // 可以在index.vue页面使用addressToast.vue了（字母大写需要换成-符号使用）
 <address-toast v-bind:updateAddress="this.updateAddress" ></address-toast>

以上就把父组件中定义的updateAddress对象传递给子组件了

子组件代码（接受父组件的值）

// addressToast.vue，接受index.vue传过来的updateAddress值
props: ['updateAddress'],
// prop也可以有另外一种写法，指明接受的数据类型，如String，Number等，
// 像props:{message:{type: String,require:true}},如果是数组或者json对象还需要默认一个返回函数

子组件可以使用updateAddress这个值了

子组件传递给父组件
子组件中定义了info对象，在需要的地方使用emit传值就行，比如addressToast组件中有个fun方法

 fun () {
      this.$emit('info','我是子组件传递给父组件的值')
      }

父组件监听这个事件，父组件使用子组件改为

// 父组件代码
<address-toast @info="show" v-bind:updateAddress="this.updateAddress" ></address-toast> 
// 父组件show方法
show(data){
console.log(date)
}
// data是传递过来的值