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 相关文章推荐
javascript 获取表单file全路径
Dec 31 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
关于js遍历表格的实例
Jul 10 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
JavaScript 原型与原型链详情
Nov 02 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设计模式 Composite (组合模式)
2011/06/26 PHP
destoon数据库表说明汇总
2014/07/15 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
JS 表单验证大全
2011/11/23 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
django框架使用方法详解
2019/07/18 Python
Django中URL的参数传递的实现
2019/08/04 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
python将字母转化为数字实例方法
2019/10/04 Python
python实现梯度下降法
2020/03/24 Python
python/golang 删除链表中的元素
2020/09/14 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
优秀学生干部推荐材料
2014/02/03 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
简历自我评价模板
2015/03/11 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
修改并编译golang源码的操作步骤
2021/07/25 Golang
MySQL创建管理KEY分区
2022/04/13 MySQL