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 相关文章推荐
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
js实现网页收藏功能
Dec 17 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
详解AngularJS controller调用factory
May 19 Javascript
js评分组件使用详解
Jun 06 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 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
浅谈php错误提示及查错方法
2015/07/14 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
js图片处理示例代码
2014/05/12 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python Pexpect库的简单使用方法
2019/01/29 Python
python创建子类的方法分析
2019/11/28 Python
Django model class Meta原理解析
2020/11/14 Python
python中time.ctime()实例用法
2021/02/03 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
网络技术专业求职信
2014/02/18 职场文书
租房协议书
2014/09/12 职场文书
工作态度怎么写
2015/06/25 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
Go语言入门exec的基本使用
2022/05/20 Golang