When we usually use the Vue component, we often need to pass some of the parent component's data to the child components, this time, we usually have a lot of methods, here are mainly divided into two situations:
The first type : static data passing: passing a string
The second type : Dynamic Data Passing: Binding a string to pass through, an array, or an object passing past
Here's a look at Dynamic data binding. For example, you can encapsulate all the data you need in an array, or inside an object and then pass it to a subassembly.
But there is a problem, if you have two data, an object, an array, you need to pass from the parent component to the child component at the same time, what will you do.
Here is an example to illustrate: sub-component JS
/**
* Receipt address component Ma You
**/
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;
})
/* Register the component named "Myaddress", passing it from parent component two data "address", "IDs" */
Parent Component Ejs page
<%-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%>/
* Bind two parent component's data "Editaddr" "IDs" in the defined component "myaddress" */
The JS page of the parent component
/** * Created by youchen.ma on 2017/6/21. */define (function (Require, exports, module) {var $ = require ("Lib_cmd/zepto-cmd"), Vue = require ("lib_cmd/v Ue-cmd "), main = require (" Js_cmd/main-cmd "), Address = require (' js_cmd/vd/venue/widget/venueeditaddress-cm
d ')//introduce the sub-component js file var vm = new Vue ({el: ' #myAward ', data:{editaddr:{}, IDS: ""})})