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的.animate()函数在IE6下的问题
Dec 03 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
Javascript缓存API
Jun 14 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
Python实现的简单算术游戏实例
2015/05/26 Python
python正则表达式的使用
2017/06/12 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python 基于wx实现音乐播放
2020/11/24 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
购买一个高级域名:BuyDomains
2018/03/11 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
什么是封装
2013/03/26 面试题
初三学习计划书范文
2014/04/30 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
MySQL索引失效场景及解决方案
2022/07/23 MySQL
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技