vue级联选择器v-model

Vue级联选择器使用v-model来实现双向数据绑定。v-model指令在内部使用了value和input事件，使得父组件能够通过v-model来控制子组件的值，并且子组件的值的变化也可以反馈给父组件。

在级联选择器的父组件中，你可以使用v-model来绑定一个变量，这个变量将会被用来存储当前所选的值。例如：

<template>
  <div>
    <cascade-selector v-model="selectedValue"></cascade-selector>
  </div>
</template>

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

export default {
  components: {
    CascadeSelector
  },
  data() {
    return {
      selectedValue: ''
    };
  }
}
</script>

在子组件CascadeSelector中，你可以使用props接收父组件传递的值，并在选择发生变化时，通过$emit('input', value)来触发父组件的input事件，从而更新父组件的数据。例如：

<template>
  <div>
    <select v-model="selected" @change="handleChange">
      <option value="">请选择</option>
      <option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</option>
    </select>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      selected: ''
    };
  },
  computed: {
    options() {
      // 返回级联选择器的选项数据
    }
  },
  mounted() {
    // 初始化选中值
    this.selected = this.value;
  },
  methods: {
    handleChange() {
      this.$emit('input', this.selected);
    }
  }
}
</script>

这样，父组件和子组件之间就建立了双向数据绑定，父组件中的selectedValue会随着子组件的选择发生变化而更新。