• 售前

  • 售后

热门帖子
入门百科

vue自界说组件实现双向绑定

[复制链接]
凌8乱 显示全部楼层 发表于 2021-10-25 19:08:59 |阅读模式 打印 上一主题 下一主题
场景:

我们比较常用的父子组件之间的交互方式:
父组件通过props将数据流入到子组件;
子组件通过$emit将更新后的数组发送的父组件;
今天,我们通过另一种方式实现交互,参考input框的v-model,实现自定义组件的双向数据绑定。
即:父组件值改变,子组件的值跟着改变;反之,子组件值发生变化,父组件值随之变化
子组件定义:

由于不能直接修改props属性值,我们这里定义valueData,通过监听及时接收value值,通过click方法修改valueData。
这里留意model语法糖prop 是接收的props属性value,保持一致。event是先上传递的事件名。
代码如下:
  1. <template>
  2.   <div>
  3.     <div>{{ `子组件值: ${value}` }}</div>
  4.     <div @click="click">点击此处修改值</div>
  5.   </div>
  6. </template>
  7. <script>
  8. export default {
  9.   name: "",
  10.   model: {
  11.     prop: "value",
  12.     event: "change"
  13.   },
  14.   props: {
  15.     value: Number
  16.   },
  17.   components: {},
  18.   data() {
  19.     return {
  20.       valueData: ""
  21.     };
  22.   },
  23.   watch: {
  24.     value(newValue, oldValue) {
  25.       this.valueData = newValue;
  26.       console.log(`子组件值:${newValue}`);
  27.     }
  28.   },
  29.   created() {
  30.   },
  31.   mounted() {
  32.   },
  33.   methods: {
  34.     click() {
  35.       this.valueData++;
  36.       this.$emit("change", this.valueData);
  37.     }
  38.   }
  39. };
  40. </script>
  41. <style lang='less' scoped>
  42. </style>
复制代码
父组件定义:

父组件通过v-model绑定text值,名称不愿定是value,可以是其他恣意符合定名规范的字符串,这里是text。
子组件通过change事件更新数据后,v-mode绑定值随之变化。
或者父组件修改text值后,子组件value值随之变化。
代码如下:
  1. <template>
  2.   <div>
  3.     <div>{{ `父组件值:${text}` }}</div>
  4.     <div @click="click">点击此处修改值</div>
  5.     <span>-----------------------------------------------------------</span>
  6.     <test-children v-model="text"></test-children>
  7.   </div>
  8. </template>
  9. <script>
  10. import TestChildren from "@/views/TestChildren";
  11. export default {
  12.   name: "",
  13.   components: { TestChildren },
  14.   data() {
  15.     return {
  16.       text: 1
  17.     };
  18.   },
  19.   created() {
  20.   },
  21.   mounted() {
  22.   },
  23.   watch: {
  24.     text(newValue, oldValue) {
  25.       console.log(`父组件值:${newValue}`);
  26.     }
  27.   },
  28.   methods: {
  29.     click() {
  30.       this.text--;
  31.     }
  32.   }
  33. };
  34. </script>
  35. <style lang='less' scoped>
  36. </style>
复制代码
效果:

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

有同学就问了 ,这不是和通过props向下游入数据,再通过$emit方式向上传递数据一样么也能实现我这种双向绑定的效果。 实在不然,如果不通过v-model,那么我们势必会在父组件写这样的代码:
  1. <test-children @change="changeText"></test-children>
复制代码
然后在通过定义changeText方法修改text值。

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

vue2.3之后提供了sync方式,也能实现双向绑定
父组件中的写法:
  1. <test-children :value.sync="text"></test-children>
复制代码
子组件中不必要使用下面model定义,直接删除即可。
  1. model: {
  2. prop: “value”,
  3. event: “change”
  4. },
复制代码
向父组件传递数据使用如下方式:
  1. this.$emit("update:value", this.valueData);
复制代码
以上就是本文的全部内容,盼望对各人的学习有所资助,也盼望各人多多支持脚本之家。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作