Vue 之兄弟组件通讯

2024年5月22日 193次阅读 来源: TaoWu

怎样把兄弟组件 1 的内容传给 兄弟组件 2 ？

比方
把子兄弟组件 1 的说的话传给兄弟组件 2 并在兄弟组件 2 上显现

思绪
建立 eventHub 用来吸收和发送事宜
组件 1 在 被点击时发送事宜至 eventHub
组件 2 在 created 时监听事宜，当事宜触发时调用处置惩罚函数
处置惩罚函数把组件 1 发送过来的数据在组件 2 内展现

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <brother1></brother1>
      <brother2></brother2>
    </div>
  </body>
  <script>
    let eventHub = new Vue()
    Vue.prototype.$eventHub = eventHub
    Vue.component('brother1', {
      template: `
        <div>
          brother1
          <button v-on:click='say1'>say</button>
        </div>
      `,
      methods: {
        say1: function () {
          this.$eventHub.$emit('say', 'i am brother1')
        }
      }
    })
    Vue.component('brother2', {
      data: function () {
        return {
          message: '',
        }
      },
      template: `
        <div>
          brother2 hear: {{message}}
        </div>
      `,
      created() {
        this.$eventHub.$on('say',(data) => {
          this.message = data
        })
      }
    })
    new Vue({
      el: '#app',
      })
  </script>
</html>
    原文作者：TaoWu
    原文地址: https://segmentfault.com/a/1190000018900124
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞