The vue parent component transmits multiple data instances to the child component, and the vue transmits multiple instances.

The vue parent component transmits multiple data instances to the child component, and the vue transmits multiple instances.

When we use VUE components, we often need to pass some data of the parent component to the child component. At this time, we usually have many methods. There are two main situations:

First: static data transmission: passing a string

Type 2: Dynamic Data Transmission: bind a string to pass the past, an array, or an object to pass the past

Here we mainly look at dynamic data binding. For example, you can encapsulate all the data you need in an array or an object and then pass it to the child component.

But there is a problem. What if you have two data items, one object and one array, which must be passed from the parent component to the child component at the same time?

Here is an example to illustrate:

Subcomponent JS

/*** Receiving address component Ma youchen **/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;})/* component with the Registration Name "myaddress", transmitted two data "address", "ids "*/

Parent component EJS page

<%-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 %>/* bind the data of two parent components to the defined component "myaddress" "editAddr" "ids "*/

JS page of the parent component

/*** Created by youchen. ma on March /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 ') // introduce the JS file var vm = new Vue ({el: '# myAward', data: {editAddr :{}, ids: ""}) of the child component :""}})})

The above example of passing multiple data from the vue parent component to the child component is all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the customer's home.