vue父组件向子组件传递多个数据的实例


Posted in Javascript onMarch 01, 2018

在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况:

第一种:静态数据传递:传递一个 字符串

第二种:动态数据传递:绑定一个字符串传过去,一个数组,或者是一个对象传递过去

这里主要看一下动态的数据绑定。比如你可以将你所有需要的数据都封装在一个数组,或者是一个对象里面然后 传递给子组件。

但是有一个问题,假如你有两个数据,一个对象,一个数组,需要同时从父组件传递给子组件,你会怎么办?

这里就通过一个例子来说明一下:

子组件的JS

/**
 * 收货地址组件 马优晨
 **/
define(function(require, exports, module){
 var $ = require("lib_cmd/zepto-cmd"),
  Vue = require('lib_cmd/vue-cmd'),
  main = require("js_cmd/main-cmd"),
 var vm= Vue.component('myaddress', {
  template: '\
  <div data-role="data-widget" data-widget="address-editor" class="address_mask" id="address-editor">\
  </div>',
  props:["address","ids"],
  methods: {
  },
  created: function () {
  }
 });
 module.export= vm;
})
/*注册名为“myaddress”的组件 ,从父组件传递过来两个数据"address","ids"*/

父组件EJS页面

<%- include ../../header %>
<link href="/css/vd/activity/myAward.css?v=<%= config.version %>" rel="external nofollow" rel="stylesheet" />
<div data-role="container" class="body <%= pageName %>" id="myAward">
 <myaddress :address="editAddr" :ids="ids"></myaddress>
</div>
 <script>
  seajs.use('js_cmd/vd/activity/myAward-cmd');
 </script>
<%- include ../../footer %>
/*在定义的组件 “myaddress”中绑定两个父组件的数据 "editAddr" "ids"*/

父组件的JS页面

/**
 * Created by youchen.ma on 2017/6/21.
 */
define(function (require, exports, module) {
 var $ = require("lib_cmd/zepto-cmd"),
  Vue = require("lib_cmd/vue-cmd"),
  main = require("js_cmd/main-cmd"),
  Address = require('js_cmd/vd/venue/widget/venueEditAddress-cmd') //引入子组件的JS文件
  var vm = new Vue({
  el: '#myAward',
  data:{ 
   editAddr:{},  
   ids:""    
   }
  })
})

以上这篇vue父组件向子组件传递多个数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ScrollDown的基本操作示例
Jun 09 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 #Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 #Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 #Javascript
vue-star评星组件开发实例
Mar 01 #Javascript
浅谈Angular 的变化检测的方法
Mar 01 #Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 #Javascript
Node.js静态服务器的实现方法
Feb 28 #Javascript
You might like
模拟flock实现文件锁定
2007/02/14 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
小程序实现录音功能
2020/09/22 Javascript
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
生物技术毕业生自荐信
2013/10/23 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
vue 实现上传组件
2021/05/31 Vue.js