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 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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 模拟POST|GET操作实现代码
2010/07/20 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python strip lstrip rstrip使用方法
2008/09/06 Python
python批量提交沙箱问题实例
2014/10/08 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
日期和时间问题
2015/01/04 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
社团文化节邀请函
2014/01/10 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
学校卫生检查制度
2014/02/03 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
初中家长评语大全
2014/12/26 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js