在平時我們使用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頁面

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

/*在定義的組件 “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父組件向子組件傳遞多個數據的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持我們。

本文標題: vue父組件向子組件傳遞多個數據的實例

本文地址: http://www.cppcns.com/ruanjian/java/221398.html

總結

以上是生活随笔為你收集整理的vue 传递多行数据_vue父组件向子组件传递多个数据的实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。