So implementieren Sie eine übergeordnete Komponente, um in Vue mehrere Daten an die untergeordnete Komponente zu übergeben

Im Folgenden werde ich Ihnen ein Beispiel für die Übergabe mehrerer Daten von einer übergeordneten Vue-Komponente an eine untergeordnete Komponente vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Wenn wir normalerweise VUE-Komponenten verwenden, müssen wir häufig bestimmte Daten von der übergeordneten Komponente an die untergeordnete Komponente übergeben. Derzeit verfügen wir normalerweise über viele Methoden, die hauptsächlich in zwei Situationen unterteilt sind:

Der erste Typ: statische Datenübertragung: Übergeben Sie eine Zeichenfolge

Der zweite Typ: dynamische Datenübertragung: Bindung Übergeben Sie eine Zeichenfolge , ein Array oder ein Objekt

Hier betrachten wir hauptsächlich die dynamische Datenbindung. Sie können beispielsweise alle benötigten Daten in einem Array oder einem Objekt kapseln und an die Unterkomponente übergeben.

Aber es gibt eine Frage: Was würden Sie tun, wenn Sie zwei Daten, ein Objekt und ein Array, gleichzeitig von der übergeordneten Komponente an die untergeordnete Komponente übergeben müssen?

Hier ein Beispiel zur Veranschaulichung:

JS für untergeordnete Komponenten

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

EJS-Seite der übergeordneten Komponente

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

JS-Seite der übergeordneten Komponente

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

Das Obige habe ich zusammengestellt Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie eine Notizanwendung mit Vuex

Häufig verwendete Anforderungsmethoden-Aliase basierend auf Axios (ausführlich Erklärung)

Organisation von Daten-[*]-Attributen in Bootstrap

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine übergeordnete Komponente, um in Vue mehrere Daten an die untergeordnete Komponente zu übergeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!