Vue el-Select自定义封装（实例）

因项目需要，基于element UI 再封装了 Select选择器，现记录如下：

新建vue文件，用于存储模板，同时我暴露了参数，和方法供父组件调用

在需要使用的地方，添加引用

import elSelect from "@/components/myComponents/elSelect";

根据自己文件路径实际填写

components中添加引用，中才能使用；

	component:{
		elSelect 
}

== 或者在项目的 main.js文件中，添加全局引用 ==

import elSelect from "@/components/myComponents/elSelect";
Vue.component('elSelect ',elSelect )

父组件中传参

//data中先定义参数 用来传参给子组件

export default {
data() {
	toOptions1:[],
	placeHolder1:"",
		},
//父组件写方法 用来接收子组件传参
methods:{
    getPOCCatalogmodelCode(v) {
      this.toPOC = v;//指定哪个参数用来接收子组件传参
      this.getTableData();  //执行后续自定义功能方法
    },
}

}

用到的知识点介绍

• 父组件传参给子组件的方法：
• 子组件中 用 props属性 定义要传的参数
  例如上文中的

props: { options1: Array, placeHolder: String }

• 父组件中 用 对应的 :属性名=“参数名” 来传递参数
  例如上文中的

:options1=“toOptions1” :placeHolder=“placeHolder1”

• 子组件给父组件传参的方法：

1. 子组件中 用 this.emit(‘参数名’,参数)
   例如上文中的

this.$emit(“toPOC”, this.POC);

2. 父组件中用同样的命名接收参数 注意前面有@符号
   例如上文中的

@toPOC=“getPOCCatalogmodelCode”

再写一个方法 接收参数

getPOCCatalogmodelCode(v) {
this.toPOC = v;//指定哪个参数用来接收子组件传参
this.getTableData(); //执行后续自定义功能方法
},

• 下拉列表中 全选和反选的写法，方法很多，注重思路