Vue子组件调用父组件的方法

子组件：

<template>
  <div>
    <h3>父组件传给子组件的city：{{sendData}}</h3>
    <button @click="selectCity('杭州')">点击此按钮将‘杭州’传递给父组件</button>
  </div>
</template>

<script>
  export default {
    name: 'cityChild',
	props: ['sendData'],//用来接收父组件给子组件的数据
    methods: {
      selectCity(val) {
        let data = {
          cityName: val
        }
        this.$emit('showCity',data)//selectCity事件触发后，自动调用showCity事件
      }
    }
  }
</script>

子组件通过this.$emit() 的方式将值传给父组件

注意：这里的showCity 是父组件中绑定的函数名。

父组件：

<template>
  <div>
    <div>父组件的city：{{city}}</div>
    <city-parent @showCity="updateCity" :sendData="city"></city-parent>
  </div>
</template>

<script>
  import cityChild from './cityChild'

  export default {
    name: 'cityParent',
    components: {cityChild},
    data() {
      return {
        city: '上海'
      }
    },
    methods: {
      updateCity(data) {
        this.city = data.cityName//改变父组件的值
        console.log('city：'+ this.city)
      }
    }
  }
</script>