Comment implémenter le composant parent pour transmettre plusieurs données au composant enfant dans vue

Ci-dessous, je vais partager avec vous un exemple de transmission de plusieurs données d'un composant parent Vue à un composant enfant. Il a une bonne valeur de référence et j'espère que cela sera utile à tout le monde.

Lorsque nous utilisons habituellement des composants VUE, nous devons souvent transmettre certaines données du composant parent au composant enfant. À l'heure actuelle, nous disposons généralement de nombreuses méthodes, qui sont principalement divisées en deux situations :

.

Le premier type : transfert de données statique : transmettre une chaîne

Le deuxième type : transfert de données dynamique : liaison Passer une chaîne , un tableau ou un objet

Ici, nous examinons principalement la liaison de données dynamique. Par exemple, vous pouvez encapsuler toutes les données dont vous avez besoin dans un tableau ou un objet et les transmettre au sous-composant.

Mais il y a une question : que feriez-vous si vous aviez deux données, un objet et un tableau, qui doivent être transmises du composant parent au composant enfant en même temps ?

Voici un exemple pour illustrer :

JS pour les composants enfants

/**
 * 收货地址组件 马优晨
 **/
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"*/

Page EJS du composant parent

<%- 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"*/

Page JS du composant parent

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

Ce qui précède est ce que j’ai compilé pour vous, j’espère qu’il vous sera utile à l’avenir.

Articles connexes :

Comment implémenter une application de prise de notes à l'aide de Vuex

Alias ​​de méthode de requête couramment utilisés basés sur Axios (détails explication)

Organisation des attributs data-[*] dans Bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!