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 相关文章推荐
jQuery autocomplete插件修改
Apr 17 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 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
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python3去掉string中的标点符号方法
2019/01/22 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python IP地址转整数
2020/11/20 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
企业治理工作自我评价
2013/09/26 职场文书
岗位聘任书范文
2014/03/29 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
水电工程师岗位职责
2015/02/13 职场文书
java多态注意项小结
2021/10/16 Java/Android