vue3 抽离城市组件

在 Vue 3 中，要将城市组件抽离出来，可以按照以下步骤操作：

1. 创建一个新的单文件组件（SFC）用来表示城市组件。可以使用 `.vue` 后缀的文件，例如 `City.vue`。
2. 在 `City.vue` 文件中，编写城市组件的模板、样式和逻辑。
3. 将原始页面中的城市相关的代码复制到 `City.vue` 组件中。
4. 将相关的数据和方法从原始页面中传递到 `City.vue` 组件中。可以通过 `props` 属性将数据传递给子组件，或者使用 `emit` 事件来与父组件通信。
5. 在原始页面中使用 `<City>` 标签来引入并使用抽离出的城市组件。

例如，假设原始页面为 `Home.vue`，你想将城市组件抽离为 `City.vue`。以下是一个简单的示例：

**City.vue**

<template>
  <div>
    <h2>{{ cityName }}</h2>
    <button @click="changeCity('New York')">Change City</button>
  </div>
</template>

<script>
export default {
  props: {
    cityName: {
      type: String,
      required: true
    }
  },
  methods: {
    changeCity(newCity) {
      this.$emit('cityChanged', newCity);
    }
  }
}
</script>

<style scoped>
/* 样式 */
</style>

**Home.vue**

<template>
  <div>
    <h1>Home</h1>
    <City :city-name="city" @city-changed="updateCity"></City>
  </div>
</template>

<script>
import City from './City.vue';

export default {
  components: {
    City
  },
  data() {
    return {
      city: 'London'
    }
  },
  methods: {
    updateCity(newCity) {
      this.city = newCity;
    }
  }
}
</script>

<style scoped>
/* 样式 */
</style>

在以上示例中，我们将城市组件的模板、样式和逻辑从原始页面 `Home.vue` 中抽离出来，并将数据和方法通过 `props` 和 `emit` 进行传递。使用 `<City>` 标签来引入并使用城市组件。

希望这个示例能帮助到你抽离 Vue 3 中的城市组件！如果有任何问题，请随时向我提问。