Vue2 组件之间的数据共享

前端JIREN

已于 2022-07-27 03:31:46 修改

阅读量469

点赞数 1

文章标签： vue

于 2022-07-22 18:09:08 首次发布

本文链接：https://blog.csdn.net/qq_45771053/article/details/125937669

版权

本文详细介绍了Vue2中组件间的数据共享方式，包括父组件通过props向子组件传递数据，子组件利用自定义事件通知父组件，以及采用EventBus实现兄弟组件的数据交互。通过示例代码展示了具体实现过程。

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

1.组件之间的关系

在项目开发中，组件之间最常见的关系分为如下两种：

父子关系和兄弟关系

(1) 父子组件之间的数据共享又分为：父 -》子共享数据子 -》父共享数据

父组件向子组件共享数据需要使用自定义属性(props) 示例代码:

//父组件
<Son :custom1='message' :custom2='user'></Son>

data(){
    return{
        message:'My name is 父组件!',
        user:{name:'Jiren',age:'3'},
    }
}

//子组件
<template>
    <div>
        <h5>Son组件</h5>
        <p>父组件传递过