Vue组件通信(非父子组件通信)

上一篇文章讲到Vue中父子组件通信,下面再聊聊非父子组件通信:

一.创建 input.vue 添加如下代码:

<template>
  <div>
    <p>Input Component</p>
    <input type="text" v-model="message" placeholder="输入消息发送给dialog组件">
    <button @click="sendMessage">发送消息</button>
  </div>
</template>
<script>
export default {
  name: "inputCom",
  data() {
    return {
      message: ""
    };
  },
  methods: {
    sendMessage(val) {
      // 事件名字自定义，用不同的名字区别事件
      this.$root.bus.$emit("changeMsg", this.message);
    }
  }
};
</script>
<style scoped>
</style>

二.创建dialog.vue 添加如下代码:

<template>
  <div>
    <p>Dialog Component</p>
    <p>Receive Message From Input Component：<span :class="active">{{InputMessage}}</span></p>
  </div>
</template>
<script>
export default {
  name: "dialogCom",
  data() {
    return {
      message: "hello input",
      InputMessage: "未收到消息",
      active: "MessageNo"
    };
  },
  mounted() {
    this.$root.bus.$on("changeMsg", Value => {
      this.print(Value);
    });
  },
  methods: {
    print(Value) {
      this.InputMessage = Value;
    }
  },
  beforeDestroy() {
    this.$root.bus.$off("changeMsg");
  },
  computed: {
    classObject() {
      return {
        isReceived: this.InputMessage == "未收到消息" ? true : false
      };
    }
  },
  watch: {
    InputMessage: function() {
      console.log(this.active);
      this.active =
        this.InputMessage == "未收到消息" ? "MessageNo" : "MessageOk";
    }
  }
};
</script>

<style scoped>
.isReceived {
  color: red;
}
.MessageOk {
  color: green;
}
.MessageNo {
  color: red;
}
</style>

三.创建nonParentChildCommunication.vue 文件添加如下代码:

<template>
  <div>
    <h3>非父子组件通信</h3>
    <b>以下实现步骤:</b>
    <ul>
      <li>1.在 main.js 中 添加data属性
        <pre class="prettyprint" v-text="mainJSCode">
        </pre>
      </li>
      <li> 2.添加需要通信的非父子组件(项目中实现的步骤)</li>
      <li>
        2.1:创建 input.vue
        <pre v-text="inputCode" class="prettyprint"></pre>
      </li>
      <li>
        2.2创建 dialog.vue
        <pre v-text="dialogCode" class="prettyprint">
        </pre>
      </li>
      <li>
        2.3:nonParentChildCommunication.vue
        <pre v-text="nonParentChildCommCode" class="prettyprint"></pre>
      </li>
    </ul>
    <hr height="10px" color="red">
    <b>以下是效果:</b>
    <Input></Input>
    <hr>
    <Dialog></Dialog>
  </div>
</template>
<script>
import Input from "./input";
import Dialog from "./dialog";
export default {
  name: "nonParentChildcommunication",
  data() {
    return {
      mainJSCode: `
        new Vue({
          el: '#app',
          data() {
            return {
              bus: new Vue() // 给data添加一个 名字为eventHub 的空vue实例,用来传输非父子组件的数据
            }
          },
          router,
          components: {
            App
          },
          template: '<App/>',

        }).$mount('#app'); // 手动挂载，#app
      `,
      inputCode: `
          template:
            <div>
              <p>Input Component!</p>
              <input type="text" v-model="message" >
              <button @click="sendMessage">发送消息</button>
            </div>

          script:
          export default {
            name: "inputCom",
            data() {
              return {
                message: ""
              };
            },
          methods: {
            sendMessage(val) {
              // 事件名字自定义，用不同的名字区别事件
              this.$root.bus.$emit("changeMsg", this.message);
            }
          }
        };
      `,
      dialogCode: `
        template:
          <div>
            <p>Dialog Component!</p>
            <p>Input Component Transmit Message：{{InputMessage}}</p>
          </div>

        script:
        export default {
          name: "dialogCom",
          data() {
            return {
              message: "hello input",
              InputMessage: ""
            };
          },
          mounted() {
            this.$root.bus.$on("changeMsg", Value => {
              this.print(Value);
            });
          },
          methods: {
            print(Value) {
              this.InputMessage = Value;
            }
          },
          beforeDestroy() {
            this.$root.bus.$off("changeMsg");
          }
        };
      `,
      nonParentChildCommCode: `
        template:
          Input></Input>
          <hr height="10px" color="red">
          <Dialog></Dialog>

        script:
          import Input from "./input";
          import Dialog from "./dialog";
          export default{
            components: {
              Input,
              Dialog
            }
          }
      `
    };
  },
  methods: {},
  components: {
    Input,
    Dialog
  }
};
</script>
<style scoped>
pre.prettyprint {
  margin: 0 0 24px;
  padding: 10px 0px 4px 0px;
  background-color: #f6f8fa;
  border: none;
}
b {
  color: rgb(0, 47, 255);
}
</style>

如果 不是特别清楚 请 下载 完整项目自己跑下就清楚了

注意: src/components/Non-parent-childComponentsCommunicate下的文件为非父子组件通信