# open-map

**Repository Path**: x-zd/open-map

## Basic Information

- **Project Name**: open-map
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-25
- **Last Updated**: 2024-04-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1、Vue2设置全局变量

```
//main.js
Vue.prototype.$map = "map"
```

```
//App.vue
<template>
  <div>
    <open-map></open-map>
  </div>
</template>

<script>
import OpenMap from "./components/OpenMap.vue";
export default {
  mounted() {
    console.log(this.$map);
  },
  components: {
    OpenMap,
  },
};
</script>

```

## 2、生命周期

如果存在父子组件嵌套的情况，先执行子组件的`mounted`,再执行父组件的`mounted` 

## 3、父子created,mouted

```
父:created
子:created
子:mountedmap
父:mountedmap
```

## 4、伪实现地图的挂载

```
<template>
  <div>OpenMap</div>
</template>

<script>
import Vue from "vue";
export default {
  created() {
    console.log("子:created");
  },
  mounted() {
    /* 实现地图的初始化 */
    const map = "openmap";
    console.log("子:mounte挂载地图为全局变量");
    Vue.prototype.$map = map;
  },
};
</script>

<style scoped></style>

```

```
//App.vue
<template>
  <div>
    <open-map></open-map>
  </div>
</template>

<script>
import OpenMap from "./components/OpenMap.vue";
export default {
  created(){
    console.log("父:created")
  },
  mounted() {
    console.log("父:mounted"+this.$map);
  },
  components: {
    OpenMap,
  },
};
</script>
```

## 5、伪代码的完成版

### 5-1、App.vue

```vue
<template>
  <div>
     // 组件的顺序
    <open-map></open-map> //领头羊;
    <open-toggle></open-toggle>
  </div>
</template>

<script>
import OpenMap from "./components/OpenMap.vue";
import OpenToggle from "./components/OpenToggle.vue";
export default {
  components: {
    OpenMap,
    OpenToggle,
  },
};
</script>
```

### 5-2、OpenMap.vue

> 1、mounted生命周期中完成全局变量map的挂载

```vue
<template>
  <div>OpenMap</div>
</template>

<script>
import Vue from "vue";
export default {
  mounted() {
    /* 实现地图的初始化 */
    const map = "openmap";
    console.log("openmap:mounte挂载地图为全局变量");
    Vue.prototype.$map = map;
  },
};
</script>
```

### 5-3、OpenToggle.vue

```vue
<template>
  <div>OpenToggle</div>
</template>

<script>
export default {
  mounted() {
    console.log("OpenToggle");
    console.log(this.$map);
  },
};
</script>
```