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

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

• 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>
    <!--v-model指令为双向绑定-->
    <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')
  },

二、兄弟组件如何通信：

• src/views/store.vue

<template>
  <div>
    <!--v-model指令为双向绑定-->
    <!--<a-input v-model="inputValue"/>-->
    <a-input @input="handleInput"/>
    <!--<a-input :value="inputValue", @input="handleInput"/>-->
    <!--<p>{{inputValue}}</p>-->
    <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

<!--一个示例，即运行vue时的页面-->
<template>
  <div id="app">
    <div id="nav">
      <!--封装了一个a标签，里面有一个重要属性：to，它指定的值是一个路径-->
      <router-link v-bind:to="{name: 'home'}">Home</router-link> |
      <!--命名路由，可以通过指定name来跳转到相应界面-->
      <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>

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