Vue2 EventBus事件总线 | 实现组件间的通信&改变大屏背景颜色实践

Posted 2021-12-29 LyCat_00

效果：

创建实例

在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>