【Vue EventBus】 | 实现组件间的通信&改变大屏背景颜色实践

效果：

创建实例

在src/utils/下新建event-bus.js:

/**
 * 事件总线
 */
import Vue from 'vue'
export const EventBus = new Vue()

子组件 screen.vue:

<template>
  <a-form class="dark" layout="horizontal" :label-col="{span: 6}" :wrapper-col="{span: 14, offset: 1}">
      <a-form-item label="背景颜色" class="bg-color-input">
                <a-input
                    v-model="color"
                    class="bg-color-value"
                    value="#263546"
                    @pressEnter="enterChange"
                    @change="changeColor"
                />
                <el-color-picker
                    v-model="color"
                    class="color-picker"
                    size="small"
                    :predefine="predefineColors"
                    @change="changeColor"
                />
                <img src="@/assets/images/color_icon.png" alt="" class="color-icon">
              </a-form-item>
  <a-form>
</template>
<script>
   export default {
			  data() {
            return {
              loading: false,
              imageUrl: '',
              customStyle: 'background: #212528;border-radius:0;border: 0;overflow: hidden',
              // 背景选择器预定义颜色
              color: '#2F5887',
              predefineColors: [
                  '#1e90ff',
                  '#00ced1',
                  '#90ee90',
                  '#ffd700',
                  '#ff8c00',
                  '#ff4500',
                  '#B81313'
                ],
            }
        },
      methods: {
          // 更改背景颜色 
          changeColor(color) {
            console.log(color)
            EventBus.$emit('changeColor',color) // -- 通过事件总线进行通信
          },
          enterChange() {
            this.color = value
            EventBus.$emit('changeColor',this.color)
          },
      }
   }
</script>

父组件index.vue:

<template>
   <a-layout class="data-view-main">
      <a-layout-sider
        v-model="optionCollapsed"
        class="data-view-option-panel"
        width="400"
        collapsed-width="0"
        :reverse-arrow="true"
        collapsible="true"
      >
        <v-screen
          @changecolor="changeColor"
        >
       </v-screen>
     </a-layout-sider>
</template>

<script>
import  VScreen from '@/views/screen-editor/screen-edit/screen'
import { EventBus } from "@/utils/event-bus";

export default {
  name: 'Index',
  components: {
    VScreen,
  },
  data() {
    return {
      backgroundColor: '',
    }
  },
  
  // 挂载时监听 
  mounted() {
    EventBus.$on('changeColor',(color) => {
      this.backgroundColor = color
    })
  },

  methods: {}
}
</script>

<style lang="less">

</style>