首页 web前端 js教程 在vue中如何实现父组件向子组件传递多个数据

在vue中如何实现父组件向子组件传递多个数据

Jun 02, 2018 pm 02:32 PM
传递 实现 组件

下面我就为大家分享一篇vue父组件向子组件传递多个数据的实例,具有很好的参考价值,希望对大家有所帮助。

在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况:

第一种:静态数据传递:传递一个 字符串

第二种:动态数据传递:绑定一个字符串传过去,一个数组,或者是一个对象传递过去

这里主要看一下动态的数据绑定。比如你可以将你所有需要的数据都封装在一个数组,或者是一个对象里面然后 传递给子组件。

但是有一个问题,假如你有两个数据,一个对象,一个数组,需要同时从父组件传递给子组件,你会怎么办?

这里就通过一个例子来说明一下:

子组件的JS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

/**

 * 收货地址组件 马优晨

 **/

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: '\

  <p data-role="data-widget" data-widget="address-editor" class="address_mask" id="address-editor">\

  </p>',

  props:["address","ids"],

  methods: {

  },

  created: function () {

  }

 });

 module.export= vm;

})

/*注册名为“myaddress”的组件 ,从父组件传递过来两个数据"address","ids"*/

登录后复制

父组件EJS页面

1

2

3

4

5

6

7

8

9

10

<%- include ../../header %>

<link href="/css/vd/activity/myAward.css?v=<%= config.version %>" rel="external nofollow" rel="stylesheet" />

<p data-role="container" class="body <%= pageName %>" id="myAward">

 <myaddress :address="editAddr" :ids="ids"></myaddress>

</p>

 <script>

  seajs.use('js_cmd/vd/activity/myAward-cmd');

 </script>

<%- include ../../footer %>

/*在定义的组件 “myaddress”中绑定两个父组件的数据 "editAddr" "ids"*/

登录后复制

父组件的JS页面

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

/**

 * 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:""   

   }

  })

})

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用Vuex实现一个笔记应用的方法

基于Axios 常用的请求方法别名(详解)

Bootstrap 中data-[*] 属性的整理

以上是在vue中如何实现父组件向子组件传递多个数据的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何安装Win10旧版本组件DirectPlay 如何安装Win10旧版本组件DirectPlay Dec 28, 2023 pm 03:43 PM

如何安装Win10旧版本组件DirectPlay

华为手机如何实现双微信登录? 华为手机如何实现双微信登录? Mar 24, 2024 am 11:27 AM

华为手机如何实现双微信登录?

使用Java编写代码实现爱心动画 使用Java编写代码实现爱心动画 Dec 23, 2023 pm 12:09 PM

使用Java编写代码实现爱心动画

如何在华为手机上实现微信分身功能 如何在华为手机上实现微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在华为手机上实现微信分身功能

PHP编程指南:实现斐波那契数列的方法 PHP编程指南:实现斐波那契数列的方法 Mar 20, 2024 pm 04:54 PM

PHP编程指南:实现斐波那契数列的方法

Angular组件及其显示属性:了解非block默认值 Angular组件及其显示属性:了解非block默认值 Mar 15, 2024 pm 04:51 PM

Angular组件及其显示属性:了解非block默认值

掌握Golang如何实现游戏开发的可能性 掌握Golang如何实现游戏开发的可能性 Mar 16, 2024 pm 12:57 PM

掌握Golang如何实现游戏开发的可能性

PHP游戏需求实现指南 PHP游戏需求实现指南 Mar 11, 2024 am 08:45 AM

PHP游戏需求实现指南

See all articles