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 相关文章推荐
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
vue router 动态路由清除方式
May 25 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 flush类输出缓冲剖析
2008/10/19 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
form中限制文本字节数js代码
2007/06/10 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
jQuery事件用法详解
2016/10/06 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
python实现html转ubb代码(html2ubb)
2014/07/03 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
使用python turtle画高达
2020/01/19 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
民主评议党员自我评价材料
2014/09/18 职场文书
故宫的导游词
2015/01/31 职场文书
2016新年晚会开场白
2015/12/03 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android