使用v-model

<!-- 父组件 -->
<template>
  <div>
    <city-component v-model="selectedCity"></city-component>
  </div>
</template>

<!-- 子组件 City/index.vue -->
<template>
  <div>
    <el-cascader
      v-model="innerValue"
      :options="options"
      :props="{ expandTrigger: 'hover', value: 'area_code', label: 'name' }"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    innerValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('input', value)
    }
  }
}
</script>

使用sync修饰符

<!-- 父组件 -->
<template>
  <div>
    <city-component :selected.sync="selectedCity"></city-component>
  </div>
</template>

<!-- 子组件 City/index.vue -->
<template>
  <div>
    <el-cascader
      v-model="value"
      :options="options"
      :props="{ expandTrigger: 'hover', value: 'area_code', label: 'name' }"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  props: {
    selected: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      value: this.selected
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('update:selected', value)
    }
  }
}
</script>

使用 provide/inject：

<!-- 父组件 -->
<template>
  <div>
    <city-component></city-component>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      setCity: (value) => {
        this.selectedCity = value
      }
    }
  },
  data() {
    return {
      selectedCity: []
    }
  }
}
</script>

<!-- 子组件 City/index.vue -->
<template>
  <div>
    <el-cascader
      v-model="value"
      :options="options"
      :props="{ expandTrigger: 'hover', value: 'area_code', label: 'name' }"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  inject: ['setCity'],
  methods: {
    handleChange(value) {
      this.setCity(value)
    }
  }
}
</script>