Vue中如何通过emit将v-for遍历得到的city值传递给父组件

以下是全部问题点及对应修正方案：

• 子组件语法错误：$emit('update-city', city 缺少右括号，导致事件触发逻辑异常
• 子模板变量错误：遍历对象为city，模板中错误使用{{item}}渲染，需和遍历变量名保持一致
• 事件冒泡冲突：span和内层p标签都绑定了click事件，点击时会同时触发两个emit，需阻止事件冒泡
• 父组件事件绑定位置错误：update-city是子组件触发的自定义事件，需绑定在<vertical-slider>子组件标签上，绑定在外层span无法接收子组件抛出的事件
• 父组件参数接收错误：子组件传递的city值需要通过$event接收，同时模板渲染的变量名和data中定义的变量名不匹配
• 父组件data语法错误：citiesArray缺少赋值符号，数组元素为字符串需加引号，return结构缺少闭合括号

修正后的子组件代码 #

<ul class="cards">
  <li v-for="city in cities" :key="city">
    <span @click="$emit('update-city', city)">
      <!-- 加stop阻止冒泡，避免触发父级span的click事件 -->
      <p @click.stop="$emit('update-toggle')">{{city}}</p>
    </span>
  </li>
</ul>

修正后的父组件代码 #

<template>
  <span>
    <!-- 把update-city事件绑定到子组件标签上，通过$event接收传递的city值 -->
    <vertical-slider 
      @update-toggle="toggled= !toggled"  
      @update-city="updatedCity = $event"
      :cities="citiesArray" 
      v-if="toggled"
    >
    </vertical-slider>
  </span>
  <!-- 和data中定义的变量名保持一致 -->
  <p>{{updatedCity}}</p>
</template>

<script>
export default {
  data(){
    return{
      toggled: false,
      updatedCity: "city",
      // 补全赋值符号和字符串引号
      citiesArray: ["City1", "City2", "City3"]
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Guillermo Medel