在平時我們使用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="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父组件向子组件传递多个数据的全部內容，希望文章能夠幫你解決所遇到的問題。

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