Vue 组件实现数据双向绑定(el

Easter79
• 阅读 565

一、组件 v-model 值通过 props 传入,必须定义为 value

Vue 组件实现数据双向绑定(el

二、将传入的 value 在 data 中重新定义赋值,以便子组件改变值(子组件中不能直接修改 props 中的值)

Vue 组件实现数据双向绑定(el

三、监听 value:使 value 能在初始化时有值,监听 data(svalue):使子组件修改值通知给父组件同步(_重要_)

Vue 组件实现数据双向绑定(el

自用封装中 el-select 组件代码

Vue 组件实现数据双向绑定(el Vue 组件实现数据双向绑定(el

<template>
  <el-select
    :clearable="sClearable"
    :disabled="sDisabled"
    :class="sClass"
    v-model="svalue"
    sPlaceholder="全部"
    @change="sChange"
  >
    <el-option
      v-for="item in options"
      :key="item[keys?keys:option]"
      :label="item[label]"
      :value="item[option]"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      required: true
    },
    options: {
      type: Array,
      required: true
    },
    keys: {
      type: String,
      default: ""
    },
    label: {
      type: String,
      default: "Text"
    },
    option: {
      type: String,
      default: "Value"
    },
    sClass: {
      type: String,
      default: "querySelect"
    },
    sClearable: {
      type: Boolean,
      default: true
    },
    sPlaceholder: {
      type: String,
      default: "全部"
    },
    sDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      svalue: this.value
    };
  },
  methods: {
    sChange() {
      this.$emit("sChange");
    }
  },
  watch: {
    value(newVal) {
      this.svalue = newVal;
    },
    svalue(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.$emit("input", this.svalue);
      }
    }
  }
};
</script>

View Code

四、父组件中使用,只需要添加 v-model 绑定值即可

Vue 组件实现数据双向绑定(el

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Alex799 Alex799
3年前
vue最新面试题
最近在面试,总结几个重点的面试题:一、vue父子组件之间的传值:简单来说,子组件通过props方法接受父组件传来的值,子组件通过$emit方法来向父组件发送数据。(具体案例可以看我之前写的博客)。二、vue生命周期函数:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestr
Chase620 Chase620
3年前
vue的8种通信方式
1.props/emit1.父组件向子组件传值下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:\'红楼梦','西游记','三国演义'\//section父组件<template<divclass"section"
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Dax Dax
3年前
Vue父子组件
几种常见的通信方式:1、prop属性父组件通过绑定属性的方式,给子组件传值,同时子组件通过设置props来接收letChildVue.extend(template:'content',props:content:type:String,default:()r
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k