vue自定义组件实现双向绑定


Posted in Vue.js onJanuary 13, 2021

场景:

我们比较常用的父子组件之间的交互方式:
父组件通过props将数据流入到子组件;
子组件通过$emit将更新后的数组发送的父组件;

今天,我们通过另一种方式实现交互,参考input框的v-model,实现自定义组件的双向数据绑定。
即:父组件值改变,子组件的值跟着改变;反之,子组件值发生变化,父组件值随之变化

子组件定义:

由于不能直接修改props属性值,我们这里定义valueData,通过监听实时接收value值,通过click方法修改valueData。
这里注意model语法糖prop 是接收的props属性value,保持一致。event是先上传递的事件名。

代码如下:

<template>
  <div>
    <div>{{ `子组件值: ${value}` }}</div>
    <div @click="click">点击此处修改值</div>
  </div>
</template>

<script>
export default {
  name: "",
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: Number
  },
  components: {},
  data() {
    return {
      valueData: ""
    };
  },
  watch: {
    value(newValue, oldValue) {
      this.valueData = newValue;
      console.log(`子组件值:${newValue}`);
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    click() {
      this.valueData++;
      this.$emit("change", this.valueData);
    }
  }
};
</script>
<style lang='less' scoped>
</style>

父组件定义:

父组件通过v-model绑定text值,名称不一定是value,可以是其他任意符合命名规范的字符串,这里是text。
子组件通过change事件更新数据后,v-mode绑定值随之变化。
或者父组件修改text值后,子组件value值随之变化。

代码如下:

<template>
  <div>
    <div>{{ `父组件值:${text}` }}</div>
    <div @click="click">点击此处修改值</div>


    <span>-----------------------------------------------------------</span>

    <test-children v-model="text"></test-children>

  </div>
</template>

<script>
import TestChildren from "@/views/TestChildren";

export default {
  name: "",
  components: { TestChildren },
  data() {
    return {
      text: 1
    };
  },
  created() {
  },
  mounted() {
  },
  watch: {
    text(newValue, oldValue) {
      console.log(`父组件值:${newValue}`);
    }
  },
  methods: {
    click() {
      this.text--;

    }
  }
};
</script>
<style lang='less' scoped>
</style>

结果:

直接copy代码到自己项目测试。无论是通过父组件改变值,还是子组件改变值。两个组件通过v-mode绑定的值始终保持一致。

答疑:

有同学就问了 ,这不是和通过props向下流入数据,再通过$emit方式向上传递数据一样么也能实现我这种双向绑定的效果。 其实不然,如果不通过v-model,那么我们势必会在父组件写这样的代码:

<test-children @change="changeText"></test-children>

然后在通过定义changeText方法修改text值。

试想,当我们的页面比较复杂,引用组件量比较庞大,页面中就需要多定义这样十几、二十几个方法。可阅读行大大降低,增加了维护成本。

扩展:

vue2.3之后提供了sync方式,也能实现双向绑定

父组件中的写法:

<test-children :value.sync="text"></test-children>

子组件中不需要使用下面model定义,直接删除即可。

model: {
prop: “value”,
event: “change”
},

向父组件传递数据使用如下方式:

this.$emit("update:value", this.valueData);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue组件生命周期运行原理解析
Nov 25 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 #Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 #Vue.js
vue 页面跳转的实现方式
Jan 12 #Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 #Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 #Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 #Vue.js
vue实现防抖的实例代码
Jan 11 #Vue.js
You might like
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
跟老齐学Python之模块的加载
2014/10/24 Python
python uuid模块使用实例
2015/04/08 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
flask中过滤器的使用详解
2018/08/01 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
毕业生物理教师求职信
2013/10/17 职场文书
汽车工程专业应届生求职信
2013/10/19 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
致跳远、跳高运动员广播稿
2014/01/09 职场文书
工艺员岗位职责
2014/02/11 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
写给老师的感谢信
2015/01/20 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python