当前位置:首页 >  站长 >  编程技术 >  正文

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

 2021-01-14 17:17  来源: 脚本之家   我来投稿 撤稿纠错

  域名预订/竞价,好“米”不错过

这篇文章主要为大家详细介绍了vue自定义组件实现双向绑定,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

#FormatStrongID_0#

我们比较常用的父子组件之间的交互方式:

父组件通过props将数据流入到子组件;

子组件通过$emit将更新后的数组发送的父组件;

今天,我们通过另一种方式实现交互,参考input框的v-model,实现自定义组件的双向数据绑定。

即:父组件值改变,子组件的值跟着改变;反之,子组件值发生变化,父组件值随之变化

#FormatStrongID_1#

由于不能直接修改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>

#FormatStrongID_2#

父组件通过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);

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

来源:脚本之家

链接:https://www.jb51.net/article/203970.htm

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
vue.js

相关文章

  • Vue 3自定义指令开发的相关总结

    这篇文章主要介绍了Vue3自定义指令开发的相关总结,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下

    标签:
    vue.js
  • vue集成一个支持图片缩放拖拽的富文本编辑器

    文章主要介绍了vue集成一个支持图片缩放拖拽的富文本编辑器,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下。

    标签:
    vue.js
  • Vue实现随机验证码功能

    这篇文章主要为大家详细介绍了Vue实现随机验证码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    标签:
    vue.js
  • vue实现树状表格效果

    这篇文章主要为大家详细介绍了vue实现树状表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    标签:
    vue.js
  • vue添加自定义右键菜单的完整实例

    这篇文章主要给大家介绍了关于vue添加自定义右键菜单的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    标签:
    vue.js

热门排行

信息推荐