1 组件之间的关系
在项目开发中，组件之间的关系分为如下 3 种：
- 父子关系
- 兄弟关系
- 后代关系
2 父子组件之间的数据共享
父子组件之间的数据共享分为：
- 父 -> 子共享数据
- 子 -> 父共享数据
- 父 <-> 子双向数据同步
2.1 父组件向子组件共享数据
父组件通过 v-bind 属性绑定向子组件共享数据。同时，子组件需要使用 props 接收数据。
<template> <div> <h1>App 组件-父组件</h1> <hr> <Test :msg="message"></Test> </div> </template> <script> import Test from './Test.vue' export default { name: 'App', data() { return { message: 'hello vue' } }, components: { Test } } </script> <style> </style>
<template> <div> <h3>Test 组件-子组件</h3> <div>{{ msg }}</div> <hr> </div> </template> <script> export default { name: 'Test', props: { msg: String } } </script> <style> </style>
2.2 子组件向父组件共享数据
子组件通过自定义事件的方式向父组件共享数据。
<template> <div> <h3>Test 组件-子组件</h3> <div>父组件传过来的数据：{{ msg }}</div> <!-- 点击按钮向父组件传值 --> <button @click="submit">向父组件传值</button> <hr> </div> </template> <script> export default { name: 'Test', props: { msg: String }, data() { return { sonmsg: 'sonMessage' } }, emits: ['submitMsg'], methods: { submit() { this.$emit( 'submitMsg', this.sonmsg ) } } } </script> <style> </style>
<template> <div> <h1>App 组件-父组件</h1> <div>子组件传递过来的值：{{ SonMsg }}</div> <hr> <Test :msg="message" @submitMsg="getMsg"></Test> </div> </template> <script> import Test from './Test.vue' export default { name: 'App', data() { return { message: 'hello vue', SonMsg: '' } }, components: { Test }, methods: { getMsg( val ) { // val为子组件传过来的参数 this.SonMsg = val } } } </script> <style> </style>
2.3 父子组件之间数据的双向同步
父组件在使用子组件期间，可以使用 v-model 指令维护组件内外数据的双向同步。
父子组件之间通过 v-model 实现数据的双向同步，与在组件上使用 v-model 一样。
3 兄弟组件之间的数据共享
兄弟组件之间实现数据共享的方案是 EventBus。可以借助于第三方的包 mitt 来创建 eventBus 对象，从而实现兄弟组件之间的数据共享。
3.1 安装 mitt 依赖包
在项目中运行如下的命令，安装 mitt 依赖包
npm i mitt
3.2 创建公共的 EventBus 模块
在项目中创建公共的 eventBus 模块
// 导入mitt import mitt from 'mitt' // 创建eventBus的实例对象 const bus = mitt() // 将eventBus的实例对象共享出去 export default bus
