进阶：组件间通信

1.原理图

2.组件A接受组件B的事件

• 组件A实现代码

<template>
  <div class="cc-container">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      componentInfo: {
        // 组件唯一标识，全局唯一
        component: "cloudcc-demo-a",
        // 组件名称，在页面编辑器显示的名字
        compName: "cloudcc-demo-a",
        // 组件描述信息
        compDesc: "组件描述信息",
      },
      isLock: false,
    };
  },
  mounted(){
    // 订阅消息
    this.$CCDK.CCBus.$on('demoB2A',(args)={
      console.log("args",args)
    })
  },
  beforeDestroy(){
    // 解绑消息
    this.$CCDK.CCBus.$off('demoB2A')
  }
};
</script>
<style lang="scss" scoped>
.cc-container {
  text-align: center;
  padding: 8px;
  background: goldenrod;
}
</style>

• 组件B发送消息实现

<template>
  <div class="cc-container">
    Hello World
    <button @click="emit">发送消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentInfo: {
        // 组件唯一标识，全局唯一
        component: "cloudcc-demo-",
        // 组件名称，在页面编辑器显示的名字
        compName: "cloudcc-demo-B",
        // 组件描述信息
        compDesc: "组件描述信息",
      },
      isLock: false,
    };
  },
  methods: {
    emit() {
      // 发布消息
      this.$CCDK.CCBus.$emit("demoB2A", "i am b");
    },
  },
};
</script>
<style lang="scss" scoped>
.cc-container {
  text-align: center;
  padding: 8px;
  background: goldenrod;
}
</style>