How to implement parent component to pass multiple data to child component in vue

Below I will share with you an example of a vue parent component passing multiple data to a child component. It has a good reference value and I hope it will be helpful to everyone.

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

First type: static data transfer: transfer a string

Second type: dynamic data transfer: binding Pass a string, an array, or an object

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 pass it to the subcomponent.

But there is a question. What would you do if you have two data, an object and an array, that need to be passed from the parent component to the child component at the same time?

Here is an example to illustrate:

JS of subcomponent

/**
 * 收货地址组件 马优晨
 **/
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: '\
  <p data-role="data-widget" data-widget="address-editor" class="address_mask" id="address-editor">\
  </p>&#39;,
  props:["address","ids"],
  methods: {
  },
  created: function () {
  }
 });
 module.export= vm;
})
/*注册名为“myaddress”的组件 ，从父组件传递过来两个数据"address","ids"*/

Parent component EJS page

<%- include ../../header %>
<link href="/css/vd/activity/myAward.css?v=<%= config.version %>" rel="external nofollow" rel="stylesheet" />
<p data-role="container" class="body <%= pageName %>" id="myAward">
 <myaddress :address="editAddr" :ids="ids"></myaddress>
</p>
 <script>
  seajs.use(&#39;js_cmd/vd/activity/myAward-cmd&#39;);
 </script>
<%- include ../../footer %>
/*在定义的组件 “myaddress”中绑定两个父组件的数据 "editAddr" "ids"*/

Parent component JS page

/**
 * 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:""    
   }
  })
})

The above is me I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to use Vuex to implement a note-taking application

Commonly used request method aliases based on Axios (detailed explanation)

Organization of data-[*] attributes in Bootstrap

The above is the detailed content of How to implement parent component to pass multiple data to child component in vue. For more information, please follow other related articles on the PHP Chinese website!