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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.