您好,登錄后才能下訂單哦!
本篇文章為大家展示了vue中怎么實現(xiàn)父組件向子組件傳遞多個數(shù)據(jù),內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
第一種:靜態(tài)數(shù)據(jù)傳遞:傳遞一個 字符串
第二種:動態(tài)數(shù)據(jù)傳遞:綁定一個字符串傳過去,一個數(shù)組,或者是一個對象傳遞過去
這里主要看一下動態(tài)的數(shù)據(jù)綁定。比如你可以將你所有需要的數(shù)據(jù)都封裝在一個數(shù)組,或者是一個對象里面然后 傳遞給子組件。
但是有一個問題,假如你有兩個數(shù)據(jù),一個對象,一個數(shù)組,需要同時從父組件傳遞給子組件,你會怎么辦?
這里就通過一個例子來說明一下:
子組件的JS
/** * 收貨地址組件 馬優(yōu)晨 **/ 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”的組件 ,從父組件傳遞過來兩個數(shù)據(jù)"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”中綁定兩個父組件的數(shù)據(jù) "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:"" } }) })
上述內(nèi)容就是vue中怎么實現(xiàn)父組件向子組件傳遞多個數(shù)據(jù),你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。