vue 城市手写组件 - 构建您自己的城市选择控件

2023-10-25 22:34:22

Vue.js 是一个强大的 JavaScript 框架，它让构建交互式、响应式 Web 应用程序变得更加简单。Vue 的组件系统是一个构建可重用 UI 组件的强大工具，可以大大简化应用程序的开发和维护。

在本文中，我们将向您展示如何使用 Vue.js 构建一个简单的城市选择组件。这个组件将允许用户从下拉菜单中选择一个城市，并将其显示在页面上。

组件基础结构代码

<template>
  <div class="city-selector">
    <label for="city">城市：</label>
    <select id="city" @change="handleChange">
      <option v-for="city in cities" :value="city" :key="city">{{ city }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cities: ['北京', '上海', '广州', '深圳', '杭州']
    }
  },
  methods: {
    handleChange(event) {
      this.$emit('city-selected', event.target.value)
    }
  }
}
</script>

实现功能代码

// 在父组件中使用城市选择组件

<template>
  <city-selector @city-selected="handleCitySelected" />
</template>

<script>
export default {
  methods: {
    handleCitySelected(city) {
      // 这里可以处理用户选择的城市
      console.log('你选择了', city)
    }
  }
}
</script>