vue父组件向子组件传递多个数据的实例

vue父组件向子组件传递多个数据的实例

在平时我们使用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: '\

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

methods: {

},

created: function () {

}

});

module.export= vm;

})

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

父组件EJS页面

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

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

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

父组件的JS页面

/**

* Created by youchen.ma on 2017/6/21.

http:// */

definehttp://(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:""

}

})

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。