vue + element 分装select

Question

问题描述

目前是两个下拉框数据是好多页面通用的，城市和服务站。现在的想法是想封装成组件，在页面引用组件就好。我写的代码可能有问题把，帮忙看下，谢谢！

相关代码

<template>
  <div>
    <el-select v-model="svalue" :placeholder="placeholdertext" filterable clearable>
      <el-option
        v-for="item in citylist" clearable
        :key="item.id"
        :label="item.departmentName"
        :value="item.id"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
import globalData from "../common/globaldata/global.data";
export default {
  name: "Select",
  props: {
    placeholder: {
      //初始显示的内容
      type: String,
      required: false,
      default: "所在城市"
    },
    multiple: {
      //是都多选
      type: Boolean,
      required: false,
      default: false
    },
    disabled: {
      //是否禁用当前组件
      type: Boolean,
      default: false
    },
    filterable: {
      //是否开启搜索功能
      type: Boolean,
      default: false
    },
    clearable: {
      //是否开启搜索功能
      type: Boolean,
      default: false
    },
    optionlist: Array,
    value: {
      type: String
      //下拉框选中的值
    }
  },
  mounted() {
    this.svalue = this.value;
  },
  watch: {
    optionlist(val) {
      this.list = val;
    }
  },
  data() {
    return {
      svalue: "",
      placeholdertext: this.placeholder,
      citylist: globalData.userDepCity //城市,
    };
  }
};
</script>
<style scope>
</style>

el-option中的代码我不清除该做处理。

引用页面的

 <Select v-model="cityvalue" :placeholder="placeholder"/>

看看是那个地方写作了？

Answer 1

要用v-model就要value+$emit('input')

Answer 2

Chang事件 $emit("Input")