qimall/addons/OperationCenter/backend/views/components/diy/operation-center/preview.php

<template id="operation-center-preview">
    <div class="diy-operation-center">
       <div>当前选择:</div>
       <div>切换</div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('operation-center-preview', {
        name: "operation-center-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#operation-center-preview',
        computed: {
            computedStyle() {
                return this.activeItem.computedStyle
            },
            searchData() {
                return this.activeItem.data
            }
        },
    });
</script>

<style>
    .diy-operation-center{
        padding:12px 24px;
        display: flex;
        justify-content: space-between;
    }
</style>