vue之下拉菜单组件的 v-model使用

vue之下拉菜单组件的 v-model使用

XSelect.vue

<template>
  <div>
    <el-select v-model="model" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "XSelect",
  props: {
    options: {
      type: Array,
      required: true,
    },
    value: {
      type: String,
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    // 计算 父组件传递儿来的
    model: {
      get() {
        return this.value;
      },
      set(newVal) {
        // 更改值 需要触发父组件的事件(也就是父组件给当前组件注册的事件)
        console.log("value-111", newVal);
        this.$emit("input", newVal);
      },
    },
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
</style>

使用组件

<template>
  <div class="home">
    value1 {{ value1 }}
    <x-select :options="options1" v-model="value1"></x-select>
    value2 {{ value2 }}
    <x-select :options="options2" v-model="value2"></x-select>
  </div>
</template>

<script>
import XSelect from "../childCom使用echarts/XSelect.vue";
export default {
  name: "Home",
  components: {
    XSelect,
  },
  data() {
    return {
      options1: [
        {
          value: "1",
          label: "黄金糕",
        },
        {
          value: "2",
          label: "双皮奶",
        },
      ],
      value1: "1",
      options2: [
        {
          value: "11",
          label: "黄金糕",
        },
        {
          value: "22",
          label: "双皮奶",
        },
      ],
      value2: "",
    };
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
</style>