Vue中封装共用下拉框组件

1、新建一个共用页面。如selectModule.vue，写入如下代码：

<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline"> 
   <el-form-item label="负责人">
      <el-select 
       v-model="formInline.userName"
        placeholder="请选择"
        @change="checkVal" >
         <el-option
          v-for="(item, index) in nameList"
          :label="item.name"
          :value="item.id"
          :key="index" >
        </el-option>
      </el-select>
    </el-form-item> 
 </el-form>
</template>

<script>
export default {
  data() { 
   return { 
     formInline: {
        userName: "",
      },
      nameList: [ 
       { name: "张三", id: "1" },
        { name: "李四", id: "2" },
        { name: "王二", id: "3" }, 
       { name: "李明", id: "4" },
      ],
    };
  },
  methods: {
    checkVal(val) { 
     //传给父组件的选中值 
     this.$emit("childFn", val); 
   }, 
 },
};
</script>

2、在需要用到的页面引入。

<template>
  <div>
    <selectModule @childFn="childFn"></selectModule>
  </div>
</template>

<script>
import selectModule from "../../components/common/selectModule.vue";
export default {
  components: {
    selectModule, 
 },
  data() { 
   return { 
       userId:""    
};
  },  
created() {},
  methods: { 
   childFn(val){ 
       this.userId = val 
       console.log(this.userId,'子组件传过来的选中值') 
   } 
 },
};
</script>