Vue表单类的父子组件数据传递示例


Posted in Javascript onMay 03, 2018

使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面。

在这里记录一下我平时常用的处理方式,这篇文章主要记录父子组件间的数据传递,非父子组件主要通过Vuex处理,这篇文章暂时不作说明。

与文档里给的方案一样,父组件向子组件传递数据主要通过 props,子组件向父组件传递数据主要通过触发器 $emit(),只是在用法上会有些不同。

1、传递基本类型数据

当子组件内容较少时,会直接传递基本类型数据,通常为String, Number, Boolean三种。

先看个例子:

<!-- 父组件 parent.vue -->

<template>
  <div class="parent">
    <h3>问卷调查</h3>
    <child v-model="form.name"></child>
    <div class="">
      <p>姓名:{{form.name}}</p>
    </div>
  </div>
</template>

<script>
  import child from './child.vue'

  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: '请输入姓名'
        }
      }
    }
  }
</script>
<!-- 子组件 child.vue -->

<template>
  <div class="child">
    <label>
      姓名:<input type="text" :value="currentValue" @input="changeName">
    </label>
  </div>
</template>

<script>
  export default {
    props: {
      // 这个 prop 属性必须是 valule,因为 v-model 展开所 v-bind 的就是 value
      value: ''
    },
    methods: {
      changeName (e) {
        // 给input元素的 input 事件绑定一个方法 changeName 
        // 每次执行这个方法的时候都会触发自定义事件 input,并且把输入框的值传递进去。
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

给子组件的 input 事件绑定一个方法 changeName,每次执行这个方法的时候都会触发自定义事件 input,并且把输入框的值传递进去。

父组件通过 v-model 指令绑定一个值,来接收子组件传递过来的数据。但这样只是父组件响应子组件的数据,如果还要子组件响应父组件传递的数据,就需要给子组件定义一个props属性 value,并且这个属性必须是 value,不能写个其它单词。

v-model 其实就是一个语法糖,详情可以参考使用自定义事件的表单输入组件。

2、传递引用类型数据

当子组件里的内容比较多时,比如子组件有多个表单元素,如果还像上面那样给每个表单元素绑定值,那就要写很多重复代码了。所以这个时候通常传递的是一个对象,传值的基本原理不变,不过写法上会有些不同。

还是先看代码:

<!-- 父组件 parent.vue -->

<template>
  <div class="parent">
    <h3>问卷调查</h3>
    <child :formData.sync="form"></child>
    <div class="">
      <p>姓名:{{form.name}}</p>
    </div>
  </div>
</template>

<script>
  import child from './child.vue'

  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: '请输入姓名',
          age: '21'
        }
      }
    }
  }
</script>
<!-- 子组件 child.vue -->

<template>
  <div class="child">
    <label>
      姓名:<input type="text" v-model="form.name">
    </label>
    <label>
      年龄:<input type="text" v-model="form.age">
    </label>
    <label>
      地点:<input type="text" v-model="form.address">
    </label>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {
          name: '',
          age: '',
          address: ''
        }
      }
    },
    props: {
      // 这个 prop 属性接收父组件传递进来的值
      formData: Object
    },
    watch: {
      // 因为不能直接修改 props 里的属性,所以不能直接把 formData 通过v-model进行绑定
      // 在这里我们需要监听 formData,当它发生变化时,立即将值赋给 data 里的 form
      formData: {
        immediate: true,
        handler (val) {
          this.form = val
        }
      }
    },
    mounted () {
      // props 是单向数据流,通过触发 update 事件绑定 formData,
      // 将 data 里的 form 指向父组件通过 formData 绑定的那个对象
      // 父组件在绑定 formData 的时候,需要加上 .sync
      this.$emit('update:formData', this.form)
    }
  }
</script>

props 是单向数据流,当我们需要对 props 内的属性进行双向绑定时,就需要用到.sync 修饰符,详情请参考.sync 修饰符,这里不做赘述。

这里需要注意的是,vue 中是不能直接修改 props 的,所以如果我们要向父组件传值,还是需要通过修改 data 里的值,prop 只是作为父子之间通话的中间人存在。

另外,如果我们想要预览父组件最开始传的数据,就需要通过 watch 监听 prop 的变化,在子组件初始化的时候就把值传进去。

注意: 我在子组件里把 this.$emit('update:formData', this.form) 放在 mounted 当中的,其原因是为了避免在每个 input 标签的 input 事件中触发自定义事件,但这样写的前提是,父子组件都要共用一个对象。

这也就是上面代码中,父组件中使用 :formData.sync="form" 绑定值时,form 是一个对象,而子组件中的触发自定义事件 this.$emit('update:formData', this.form) ,this.form 也得是一个对象。

这里还需要注意的是,如果有多个子组件使用一个对象,那就要避免这种写法,因为一个组件修改了这个对象的数据,那么其它子组件也就都跟着改变了。

所以我在用的时候都是给每个子组件分配了一个自己的对象,比如:

data () {
 return {
  parentObject: {
   child_1_obj: {},
   child_2_obj: {},
  }
 }
}

这是在父组件里定义的数据,当然名字不会这样取了。

结尾

也没什么说的了,对 Vue 还是处于使用的阶段,对其底层的东西了解还不够,我也好想读读源码,但总只是想想.....大家觉得有什么不妥的地方尽管说,大家相互交流交流。

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

Javascript 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
Webpack path与publicPath的区别详解
May 03 #Javascript
Webpack中publicPath路径问题详解
May 03 #Javascript
Angular Renderer (渲染器)的具体使用
May 03 #Javascript
react router4+redux实现路由权限控制的方法
May 03 #Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 #Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 #jQuery
详解VueJs中的V-bind指令
May 03 #Javascript
You might like
SONY ICF-F10中波修复记
2021/03/02 无线电
用PHP调用数据库的存贮过程
2006/10/09 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
iview同时验证多个表单问题总结
2018/09/29 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
北京华建集团SQL面试题
2014/06/03 面试题
标准毕业生自荐信范文
2013/11/04 职场文书
个人合作协议范本
2015/08/06 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers