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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
js实现纯前端压缩图片
Nov 16 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发送邮件类代码附详细说明
2008/07/10 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
php unlink()函数使用教程
2018/07/12 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python探索之创建二叉树
2017/10/25 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
python实现windows下文件备份脚本
2018/05/27 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
python实现三次样条插值
2018/12/17 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
一份软件工程师的面试试题
2016/02/01 面试题
单位单身证明范本
2014/01/11 职场文书
医院合作协议书
2014/08/19 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书