Bagaimana untuk lulus berbilang parameter dalam vue

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web dan antara muka pengguna. Dalam Vue, kita selalunya perlu menghantar parameter untuk melaksanakan pelbagai operasi, seperti komponen pemaparan, kaedah panggilan, dsb. Artikel ini akan memperkenalkan cara menghantar berbilang parameter dalam Vue.

Dalam Vue, kita boleh menghantar parameter kepada subkomponen melalui Props. Props ialah cara berkomunikasi antara komponen. Berikut ialah contoh:

<script><br>import ChildComponent daripada './ChildComponent.vue';</p> <p>eksport lalai {<br> komponen: {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">ChildComponent</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p>},<br> data() {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return {   value1: 'some value',   value2: 123 }</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>}<br>}<br></script>

Dalam contoh ini, kita mempunyai komponen induk dengan dua nilai: value1 dan value2. Kami ingin menyampaikan nilai ini kepada ChildComponent sebagai Props. Untuk menghantar berbilang parameter, kita boleh menggunakan titik bertindih (:) untuk mengikat setiap parameter kepada sifat komponen.

Walau bagaimanapun, jika kita ingin menghantar berbilang parameter, menghantar Props memerlukan pengikatan setiap parameter secara manual, yang boleh menyusahkan. Nasib baik, Vue menyediakan cara lain untuk lulus berbilang parameter - menghantar parameter melalui objek.

🎜>import ChildComponent daripada './ChildComponent.vue';

komponen: {

ChildComponent

data() {

return {
  props: {
    prop1: 'some value',
    prop2: 123
  }
}

}

sendData() {
  this.$emit('send-data', {
    prop1: 'some value',
    prop2: 123
  });
}

ChildComponent

handleData(data) {
  console.log(data.prop1);
  console.log(data.prop2);
}