vue element 使用公共组件 实现select下拉框赋值 并同时实现两个下拉框的级联操作。

公共组件（子组件）：

 import {sendqj}  from  ‘test.api’
 export default {
 name：‘testSelect’
 props: {     //props是父组件传过来的值
      value: null,
      lxlb:null,
      tj:' ',
 },
 data() {
      return {
        selectData:null,
        myValue: this.value
      }
    },
     watch:{
      value(val){
          this.myValue = val;
      },
      tj(val){
	        this.myValue = null;
	        this.gettestList();
      },
      myValue(val){
        this.$emit('input', val); //实现父子组件间的值传递 this.$emit(事件,值)  （这里的input：v-model是一个语法糖，等于:value+@input）
      },
      lxlb(val){
          this.setList();//监听父组件传过来的lxlb,
      }
    },
    mounted(){
      this.gettestList();
    },
     methods: {
	      setList(){
	              //发送请求后给selectData 赋值；根据父组件 lxlb 传过来的值，判断对应select下拉框应该赋的值。
	              sendqj(tj).then(res=>{
	              		if(this.lxlb==1){
	              		       	var a=[]
			              		for (let n of reponse.content){
				                      if( n.lable=== '3' || n.lable=== '4' ){
				                          a.push(n);
				                      }
		                		  }
	      
	              		}
	              })
	              this.selectData = a; //监听lxlb改变后 对应tj下的组件内容改变。
	              this.$emit('getSelectData',this.selectData);
	          })
	      },
	      gettestList(){
	      		sendqj(tj).then(res=>{
							。。。。
							this.selectData = a; //对应tj下的组件内容赋值。
	                        this.$emit('getSelectData',this.selectData);
				}
	      }
	}     

页面(父组件)：

    //@input获取当前选中的value值
 
 
 
  （v-model是一个语法糖，等于:value+@input）

script:

import testSelect from '@/views/sysmodule/components/testSelect'   //引用的公共组件testSelect  页面使用为

methods：{
 			 //获取子组件返回的值
            getdata(val){
                this.a=val; //赋值给a, 然后子组件监听lxlb的变化，重新给tj=‘bbb’的select框赋值
            },
}