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 相关文章推荐
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
对javascript继承的理解
Oct 11 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
javascript History对象原理解析
Feb 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
繁简字转换功能
2006/07/19 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
Vue computed计算属性的使用方法
2017/07/14 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
python Django框架实现自定义表单提交
2016/03/25 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
详解Python学习之安装pandas
2019/04/16 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Python底层封装实现方法详解
2020/01/22 Python
python+requests接口自动化框架的实现
2020/08/31 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
项目投资意向书范本
2015/05/09 职场文书
小孩不笨观后感
2015/06/03 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android