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

自定义组件

<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>