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 相关文章推荐
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
多种方式实现js图片预览
Dec 12 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
vue实现底部菜单功能
Jul 24 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
vue 实现锚点功能操作
Aug 10 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
我的论坛源代码(六)
2006/10/09 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
微信小程序实现自动定位功能
2018/10/31 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python中扩展包的安装方法详解
2017/06/14 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
python实现最长公共子序列
2018/05/22 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
浅析python内置模块collections
2019/11/15 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
会计主管岗位职责
2014/01/03 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
先进党支部事迹材料
2014/12/24 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
P站美图推荐——变身女主角特辑
2022/03/20 日漫
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸