Vue + Cesium的组件设计模式（有问题）

问题介绍

在 Cesium 项目的开发过程中，我们往往需要来发许多组件，包括3D模型的显示、图层绘制工具等等，但是如果我们将这些所有的内容放在一个组件之中时，整个项目就会变得非常臃肿，因此我们需要一些组件的开发方法解决这个问题。

解决办法

Cesium项目的开发过程中主要使用两种方式：
1.全局挂载（所有组件均为子组件）
2.以地图组件作为父组件（其他子组件通过props方式信息传递）

$\stackrel{◯}{1}$全局挂载

在这种方式下，所有的功能都写成子组件的方式，其中对于 viewer 创建的地图使用全局挂载的方法，其他的功能直接调用 window.viewer 即可。

window.viewer = viewer

$\stackrel{◯}{2}$props传递viewer

在这种方式下，以地图组件作为父组件，父子组件通过 props 传递 viewer 的方式进行通信。

[注意]此时由于父子组件都有大量的回调函数、异步逻辑、动态组件，因此子组件的可能会先于父组件渲染，这个时候我们需要利用 vue 的 watch 监听数据变化，只有当数据更新后我们执行相应的操作。

父组件构建的 viewer 的地图组件，并且引入子组件：

<template>
    <!-- 水域分区 -->
    <waterShed :viewer="viewer"></waterShed>
</template>

子组件利用 watch 监听数据变化（从无定义到父组件传来的 viewer 对象的变化）

<script>
export default {
    name:"waterShed",
    data(){
        return{};
    },
    methods: {
        init() {
            this.viewer.scene.primitives.add(
                new Cesium.Primitive({
                    geometryInstances: new Cesium.GeometryInstance({
                    geometry: new Cesium.RectangleGeometry({
                    rectangle: Cesium.Rectangle.fromDegrees(
                        111.18, 30.89,
                        113.22, 30.95
                    ),
                    vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
                }),
            }),
            appearance: new Cesium.EllipsoidSurfaceAppearance({
                material: new Cesium.Material({
                    fabric: {
                        type: "Water",
                        uniforms: {
                            baseWaterColor: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 0.5),
                            // normalMap: 'C:/Users/Administrator/Desktop/20231011b9dwfLJz/waterNormals.jpg',
                            frequency: 1000.0,
                            animationSpeed: 0.05,
                            amplitude: 15,
                            specularIntensity: 7
                        }
                    }
                })
            }),
        })
        );
        }
    },
    props:{
        viewer: {}
    },
    mounted(){
    },
    watch: {
    'viewer': function (val) {
        if (val !== null) {
        this.init()
        }
    },
    }
};
</script>

---------------------------------------------------------------------------------------------------------------------------------突然意识到一个问题，如果利用props传递viewer，那子组件必然要在父组件传过来的viewer基础上添加实体等等，这不就相当于修改父组件利用props传递的值了嘛？子组件修改props不是不行嘛😟😟😟😟😟😟