vue 自定义组件 v-model 使用笔记

1、自定义组件

<template>
  <div class="organizationList">
    <el-row class="PageInfo">
      <i class="info-bar"></i>组织机构      (请先选择组织机构)
    </el-row>
      <el-form-item label="组织机构" prop='organizationCode'>
      <el-select
        v-model="organizationCode"
        clearable
        placeholder="请选择组织机构"
        class="w150"
         @change="organizationChange"

      >
        <el-option
          v-for="item in options"
          :key="item.funeralParlourCode"
          :label="item.organizationName"
          :value="item.funeralParlourCode"
        />
      </el-select>
    </el-form-item>


  </div>
</template>

<script>
import {getOrganizationListItems} from "@/api/user"
  export default {
    model: {
          prop: 'funeralParlourCode',
          event: 'change'
        },
    props: {
      funeralParlourCode: {
        type: String,
        default: ''
      },
    },
    data () {
      return {
        organizationCode:'',
        options:[],
      
      }
    },
    created () {
      this.getOrganizationList();
    },
    methods: {
      async getOrganizationList () {
        let res = await getOrganizationListItems()
        if(res.code !==1) return this.$message.error(res.message)
        let {data}= res
        if(data){
          this.options= data.organizationListItems
        }
      },
      organizationChange(val){
        this.$emit('input',val) //v-model实现 step2.需要触发input
        this.$emit('change',val) //将原change事件暴露
      }
    },
    watch: {
      funeralParlourCode (newValue, oldValue) {
        this.organizationCode=newValue
      }
    },
  }
</script>

<style lang="scss" scoped>
.organizationList{
  /deep/ .el-form-item__label-wrap{
    margin-left: 40px;
  }
}
</style>

2、父组件

 <organizationList v-model="funeralParlourCode"></organizationList>