三、vue3学习笔记：状态管理bus的使用

本是古典何须时尚 2024-04-18 11:47 36阅读 0赞

### 文章目录 ###

*   *  一、子组件和父组件通信：
     *  二、兄弟组件如何通信：
     *  三、两页面组件之间的通信：
     *   *  3.1 两页面组件之间的通信
         *  3.2 $on拓展：单页面监听
     *  拓展文档：

## 一、子组件和父组件通信： ##

*  src/components/AInput.vue

<template>
      <input @input="handleInput" :value="value">
    </template>
    
    <script>
        export default { 
          name: "AInput",
          props: { 
            value: { 
              type: [String, Number],
              default: ''
            }
          },
          methods:{ 
            handleInput (event) { 
              // 获取到value的值
              const value = event.target.value
              // 将更改之后的值传出去
              this.$emit('input', value)
            }
          }
        }
    </script>
    
    <style scoped>
    
    </style>

*  src/views/store.vue

<template>
      <div>
        
        <a-input v-model="inputValue"/>
        <p>{ { inputValue}}</p>
      </div>
    </template>
    
    <script>
      // 引入组件
      import AInput from '_c/AInput.vue'
    
      export default { 
        name: "store",
        data() { 
          return { 
            inputValue: ''
          }
        },
        // 将组件注册
        components: { 
          AInput
        }
      }
    </script>
    
    <style scoped>
    
    </style>

*  src/router/router.js

{ 
        path: '/store',
        component: () => import('@/views/store.vue')
      },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pcmFjbGVvYQ_size_16_color_FFFFFF_t_70]

## 二、兄弟组件如何通信： ##

*  src/views/store.vue

<template>
      <div>
        
        
        <a-input @input="handleInput"/>
        
        
        <a-show :content="inputValue"/>
      </div>
    </template>
    
    <script>
      // 引入组件
      import AInput from '_c/AInput.vue'
      import AShow from '_c/AShow.vue'
    
      export default { 
        name: "store",
        data() { 
          return { 
            inputValue: ''
          }
        },
        // 将组件注册
        components: { 
          AInput,
          AShow
        },
        methods: { 
          handleInput (value) { 
            this.inputValue = value
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>

*  src/components/AShow.vue

<template>
        <div>
          <p>
            AShow : { { content}}
          </p>
        </div>
    </template>
    
    <script>
        export default { 
          props: { 
            content: { 
              type: [String, Number],
              default: ''
            }
          },
        }
    </script>
    
    <style scoped>
    
    </style>

## 三、两页面组件之间的通信： ##

### 3.1 两页面组件之间的通信 ###

*  创建一个空的bus作为交互的中介
 *  src/main.js : 注册bus

import Vue from 'vue'
    import App from './App.vue'
    import router from './router/index'
    import store from './store/index'
    import Bus from './bus'
    
    Vue.config.productionTip = false
    // 将其注入到下面的Vue根实例里面
    Vue.prototype.$bus = Bus
    new Vue({ 
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

*  src/App.vue

<template>
      <div id="app">
        <div id="nav">
          
          <router-link v-bind:to="{name: 'home'}">Home</router-link> |
          
          <router-link v-bind:to="{name: 'about'}">About</router-link>
        </div>
        <transition-group :name="routerTransition">
        
        <router-view key="default"/>
        
        <router-view name="email" key="email"/>
        <router-view name="tel" key="tel"/>
        </transition-group>
      </div>
    </template>

*  src/bus/index.js

import Vue from 'vue'
    
    const Bus = new Vue()
    
    export default Bus

*  src/views/email.vue

<template>
      <div class="email">
        <button @click="handleClick">按我</button>
      </div>
    </template>
    
    <script>
        export default { 
          methods: { 
            handleClick () { 
              // 把事件提交给bus，使用$emit方法，触发on-click事件，传hello这个值
              this.$emit('on-click', 'hello')
            }
          },
          // 生命周期钩子
          mounted () { 
            console.log(this.$bus);
    
          }
        }
    </script>
    
    <style scoped>
      .email { 
        border: 1px solid green;
      }
    </style>

*  src/views/tel.vue: 在tel中接收由email传过来的hello

<template>
        <div class="tel">
          <p>
            { {  message }}
          </p>
        </div>
    </template>
    
    <script>
        export default { 
          data () { 
            return { 
              message: ''
            }
          },
          mounted () { 
            this.$on('on-click', (mes) => { 
              this.message = mes
            })
          }
        }
    </script>
    
    <style scoped>
     .tel { 
       border: 1px solid red;
     }
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pcmFjbGVvYQ_size_16_color_FFFFFF_t_70 1]

### 3.2 $on拓展：单页面监听 ###

<template>
      <div class="email">
        <button @click="handleClick">按我</button>
      </div>
    </template>
    
    <script>
        export default { 
          methods: { 
            handleClick () { 
              // 把事件提交给bus，使用$emit方法，触发on-click事件，传hello这个值
              this.$emit('on-click', 'hello')
            }
          },
          // 生命周期钩子
          mounted () { 
            this.$on('on-click', mes => { 
              console.log(mes);
                        
            })
          }
        }
    </script>
    
    <style scoped>
      .email { 
        border: 1px solid green;
      }
    </style>

## 拓展文档： ##

vue之父子组件间通信实例讲解(props、$ref、$emit)：https://www.jb51.net/article/140581.htm

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pcmFjbGVvYQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c6377b6e45084d51ac44ffc85e7b4dbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pcmFjbGVvYQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e391796802f9493594fd6aaee4a29c08.png