vue父組件向子組件傳遞多個數(shù)據(jù)的實例
在平時我們使用VUE組件的時候,經常需要將父組件的某些數(shù)據(jù)傳遞給子組件,這個時候,我們通常會有很多的辦法,這里主要分為兩種情況:
第一種:靜態(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:"" } }) })
以上這篇vue父組件向子組件傳遞多個數(shù)據(jù)的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
巧妙運用v-model實現(xiàn)父子組件傳值的方法示例
這篇文章主要介紹了巧妙運用v-model實現(xiàn)父子組件傳值的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04vue3?element?plus?table?selection展示數(shù)據(jù),默認選中功能方式
這篇文章主要介紹了vue3?element?plus?table?selection展示數(shù)據(jù),默認選中功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07Vue Element前端應用開發(fā)之獲取后端數(shù)據(jù)
這篇文章主要介紹了Vue Element前端應用開發(fā)之獲取后端數(shù)據(jù),對vue感興趣的同學,可以參考下2021-05-05