Cara menggunakan kaedah pembinaan dalam vue

Vue ialah rangka kerja JavaScript popular yang menyediakan banyak ciri berguna, termasuk komponen Vue. Komponen Vue membolehkan anda memecahkan aplikasi anda kepada bahagian yang boleh digunakan semula dan lebih kecil. Dalam artikel ini, kami akan membincangkan asas komponen Vue dan cara menggunakannya.

Asas komponen Vue

Komponen Vue ialah sebahagian daripada rangka kerja Vue dan digunakan untuk mewakili bahagian aplikasi yang boleh digunakan semula dan lebih kecil. Komponen boleh mengandungi HTML, CSS dan JavaScript, dan boleh digunakan beberapa kali dalam aplikasi. Ini menjadikan komponen sangat berguna apabila membangunkan aplikasi besar kerana anda boleh memfokuskan setiap komponen pada tugasnya sendiri tanpa perlu menumbuk keseluruhan aplikasi bersama-sama.

Untuk mencipta komponen Vue, anda boleh menggunakan kaedah Vue.component(). Kaedah ini memerlukan dua parameter, nama komponen dan objek pilihan komponen. Nama komponen mestilah rentetan huruf kecil dan hanya boleh mengandungi tanda sempang, nombor dan huruf. Objek pilihan komponen mesti mengandungi elemen templat, yang mengandungi kod HTML komponen.

Berikut ialah contoh komponen Vue mudah:

Vue.component('my-component', {
  template: '<div>这是我的组件</div>'
});

Untuk menggunakan komponen ini dalam aplikasi anda, rujuknya dalam contoh Vue:

new Vue({
  el: '#app',
  template: '<my-component></my-component>'
});

Dalam contoh ini, kami tambah komponen saya pada templat contoh Vue. Sekarang, apabila tika Vue dibuat seketika, ia akan memaparkan komponen ini pada halaman.

Cara menggunakan komponen Vue

Terdapat banyak cara untuk menggunakan komponen Vue. Dalam bahagian berikut, kami akan memperkenalkan beberapa kaedah yang biasa digunakan.

Props

Komunikasi antara komponen ialah fungsi penting komponen Vue. Apabila komponen induk perlu menghantar data kepada komponen anak, anda boleh menggunakan atribut props. Ini dilakukan dengan menentukan tatasusunan prop dalam komponen anak.

Berikut ialah contoh subkomponen yang menunjukkan cara menggunakan atribut props:

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

new Vue({
  el: '#app',
  data: {
    parentMsg: '来自父亲的消息'
  }
});

Dalam contoh ini, kami mentakrifkan atribut props yang dipanggil "message" dan menambahnya dalam templat subkomponen memetiknya dalam . Dalam komponen induk, kami mentakrifkan objek data yang dipanggil parentMsg dan menetapkan nilainya kepada 'Mesej daripada ibu bapa'. Sekarang, kita boleh menggunakan komponen anak dalam komponen induk dan lulus parentMsg sebagai prop:

<div id="app">
  <child-component :message="parentMsg"></child-component>
</div>

Dalam contoh ini, kami telah menggunakan arahan v-bind untuk mengikat parentMsg sebagai sifat mesej kanak-kanak komponen. Kini komponen anak akan memaparkan mesej daripada komponen induk.

Emit

Emit membenarkan komponen anak menghantar data kepada komponen induk. Komponen kanak-kanak boleh menggunakan kaedah $emit khas, yang mencetuskan peristiwa tersuai pada komponen induk.

Berikut ialah contoh yang menunjukkan cara menggunakan emit untuk melaksanakan komponen anak untuk menghantar data kepada komponen induk:

Vue.component('child-component', {
  template: '<button v-on:click="emitEvent">发送事件</button>',
  methods: {
    emitEvent: function() {
      this.$emit('my-event', '这是我的消息');
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentMsg: ''
  },
  methods: {
    handleEvent: function(msg) {
      this.parentMsg = msg;
    }
  }
});

Dalam contoh ini, komponen anak mengandungi butang yang menghantar acara, dan apabila diklik Gunakan kaedah $emit untuk mencetuskan acara 'my-event' apabila menekan butang. Dalam komponen induk, kami mentakrifkan kaedah yang dipanggil handleEvent dan mengikatnya pada acara 'my-event'. Apabila komponen mencetuskan acara ini, kaedah handleEvent akan dipanggil dan menerima mesej yang dihantar oleh komponen anak.

<div id="app">
  <child-component v-on:my-event="handleEvent"></child-component>
  <p>{{ parentMsg }}</p>
</div>

Dalam contoh ini, kami mengikat kaedah handleEvent pada acara 'my-event' dan memaparkan nilai parentMsg pada halaman. Kini, apabila komponen kanak-kanak mengklik butang dan peristiwa 'my-event' dicetuskan, kaedah handleEvent akan dipanggil dan mesej yang diluluskan oleh komponen kanak-kanak akan disimpan dalam pembolehubah parentMsg.

Slot

Slot ialah satu lagi fungsi penting komponen Vue. Ia membenarkan komponen induk menghantar kod HTML kepada komponen anak dan memasukkannya ke dalam templat komponen anak.

Berikut ialah contoh yang menunjukkan cara menggunakan fungsi Slot untuk menghantar kod HTML daripada komponen induk kepada komponen anak:

Vue.component('child-component', {
  template: '<div><slot></slot></div>'
});

new Vue({
  el: '#app'
});

Dalam contoh ini, kami menggunakan 58cb293b8600657fad49ec2c8d37b472 templat komponen kanak-kanak. Elemen ini akan memaparkan kod HTML yang sepadan dalam komponen anak. Sekarang, kita boleh menggunakan teg 6520631531c208a38051e59cee36c278 dalam komponen induk dan masukkan kod HTML dalam teg:

<div id="app">
  <child-component>
    <h1>这是一级标题</h1>
    <p>这是一段文本</p>
  </child-component>
</div>

Dalam contoh ini, kod HTML komponen induk akan disertakan dalam templat komponen kanak-kanak dan dipaparkan pada halaman.

Slot Berskop

Slot Berskop ialah ciri slot lanjutan yang membolehkan anda menghantar data kepada komponen kanak-kanak dan bukannya kod HTML. Ini sangat berguna kerana ia membolehkan anda menggunakan semula komponen dalam konteks yang berbeza.

Berikut ialah contoh yang menunjukkan cara menggunakan ciri Slot Skop untuk menghantar data daripada komponen induk kepada komponen anak:

Vue.component('child-component', {
  template: '<div><slot v-bind:user="user"></slot></div>',
  data: function() {
    return {
      user: {
        name: '张三',
        age: 20
      }
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    getUser: function(name, age) {
      alert(name + ' ' + age);
    }
  }
});

Dalam contoh ini, kami menggunakan 58cb293b8600657fad49ec2c8d37b472 templat komponen kanak-kanak dan berikan objek pengguna kepadanya. Dalam komponen induk, kami mentakrifkan kaedah yang dipanggil getUser dan mengikatnya pada elemen d477f9ce7bf77f53fbcf36bec1b69b7a

<div id="app">
  <child-component>
    <template v-slot:default="slotProps">
      <button v-on:click="getUser(slotProps.user.name, slotProps.user.age)">获取用户信息</button>
    </template>
  </child-component>
</div>

Dalam contoh ini, kami menggunakan arahan v-slot untuk mengikat data pengguna ke elemen d477f9ce7bf77f53fbcf36bec1b69b7a komponen anak dan menggunakan arahan v-on dan kaedah getUser pada butang. Sekarang, apabila butang diklik, komponen induk akan memanggil kaedah getUser dan menyampaikannya data pengguna yang diluluskan oleh komponen anak sebagai parameter.

Kesimpulan

Komponen Vue ialah ciri yang sangat berguna yang membolehkan anda memecahkan aplikasi anda kepada bahagian yang boleh digunakan semula dan lebih kecil. Dalam artikel ini, kami memperkenalkan asas komponen Vue dan beberapa kaedah penggunaan biasa, termasuk prop, emit, Slot dan Slot Scoped. Saya harap kaedah ini dapat membantu anda menggunakan fungsi komponen Vue dengan lebih baik dan meningkatkan kecekapan pembangunan aplikasi anda.

Atas ialah kandungan terperinci Cara menggunakan kaedah pembinaan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!