父组件和子组件数据双向绑定

大得369

于 2024-08-20 11:48:18 发布

阅读量120

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_34631220/article/details/141354455

版权

父

 <!-- 封装 -->
              <el-descriptions-item label="分机机构">
                <wb-select :parentValue.sync="dadeval" placeholders="分机机构"></wb-select>
              </el-descriptions-item>
export default {
    data() {
      return {
        dadeval:"",
        }
     }
}

子组件

<template>
  <div>
    <el-popover placement="bottom" :width="width" trigger="click" popper-class="wb-padding" v-model="visible">
      <div>
        <div style="overflow: auto;height: 230px;">
          <ul class="el-scrollbar__view el-select-dropdown__list">
            <div v-for="(it,index) in list" :key="index" @click="upData(it)"><li class="el-select-dropdown__item"><span>{{it.name}}</span></li></div>
          </ul>
        </div>
        <div :style="'background-color: #fff;width:'+width+' px;'">
          <div style="display: flex; line-height: 30px;cursor: pointer;">
            <div class="addBorder" style="width: 50%;">新增</div>
            <div class="delBorder" style="width: 50%;">重置</div>
          </div>
        </div>
      </div>
      <el-input type="text" ref="myInput" v-model="name" @focus="focusSelect" @input="remoteName" slot="reference" size="mini" style="width: 100%;" :placeholder="placeholders"></el-input>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    parentValue: "",
    placeholders:"",
  },
  data() {
    return {
      name: '',
      width:"200",
      dataList:{"mshopid":""},
      visible: false,
      list: [{'id':1,"name":"dade"},{'id':2,"name":"dade2"},{'id':3,"name":"dade3"},{'id':4,"name":"dade4"}]
    };
  },
  mounted() {

  },
  methods: {
    // 获得焦点
    focusSelect(){
      const inputElement = this.$refs.myInput.$el;
      this.width = inputElement.offsetWidth;
      console.log(`el-input 的宽度为：${this.width}px`);
    },
    // 数据改变
    remoteName(e){
      console.log(this.placeholders)
    },
    //点击选中,返回值
    upData(it){
      this.name = it.name;
      this.$emit('update:parentValue', it.id);
      this.visible = false;
    }
  }
};
</script>
</script>

<style>
  .el-select-dropdown__wrap {
      max-height: 200px !important;
  }
  .wb-padding {
    padding: 0px;
  }
  .addBorder{
    text-align: center;
    border-top: 1px solid rgb(221 221 221);
  }
  .delBorder{
    text-align: center;
    border-top: 1px solid rgb(221 221 221);
    border-left: 1px solid rgb(221 221 221);
  }
</style>