Cesium指南-自定义vue组件

Posted 2023-04-17

参考技术A 前面介绍了使用原生的 Widget ，其实现思想也是基于 MVVM ，只是用的 knockout.js 库，大伙都不怎么用这个 js 库，用起来也比较麻烦，这里使用大家主流的 vue 来实现一个放大缩小的组件。

这里跟其它创建组件的方式是一样的，但有一点需要注意的是，引入第三方组件时，如果是在 main.js 中引入的，这里还需要重新引入一次，是因为这里使用的是 createApp 来挂载组件的。

首先引入组件

cesium 中都是采用 appendChild 的方法来添加元素，所以在使用 vue 组件时，可以使用 createApp 来创建组件，并挂载到对应的元素上。如下所示：

vue7自定义组件，插槽

参考技术A components:   

每个组件就是一个小型的vue实例，它里面除了不能设置el选项，其他选项它多有。

使用template选项，定义组件的模板，模板中必须包含一个根标签

vue实例中定义好组件，然后再body中使用命名的组件名称作为标签；

在组件中通过props数组来定义组件的属性。（ props中接收template里面插值表达式里面定义的变量 ，然后在body中使用title="北京" content="奔驰"将数据传输出去，如果是要绑定变量则用 v-for 循环，再使用  :title="item.title" :content="item.content" 来传输数据）

props选项，用于定义组件的属性，有两种方式，1.定义数组  2.定义对象。props是只读的，不能修改。 一般通过中转props传进来的值来改变

$emit( ) ，触发一个自定义事件，事件的名称是synccount，将count的最新值作为事件对象传出去，注意，自定义事件名称不能使用大写

对myCount的变化进行监听，当发生变化时，触发一个自定义事件，事件的名称是synccount，此处的事件不能不能大写，val为传参，然后在b-counter中用@synccount="synccount" 来绑定，此处的index为下标，$event是回发的事件。

Vue,component(' b-box ' ,         )， 其余和局部组件相同。

在template中使用<slot></slot>，然后在DOM中添加想要的内容