Cara menggunakan komponen el in vue

Dalam komponen Vue, atribut el digunakan untuk menentukan elemen akar komponen, iaitu titik pelekap. Melalui atribut el, komponen boleh diberikan kepada elemen yang ditentukan dalam DOM.

Apabila membangun dengan Vue.js, biasanya terdapat dua cara untuk menentukan elemen akar komponen.

Salah satunya ialah menggunakan atribut el dalam contoh Vue untuk menentukan elemen akar. Kaedah ini sesuai untuk mencipta kejadian melalui Vue() baharu.

Lainnya ialah menggunakan atribut el di dalam komponen untuk menentukan elemen akar. Kaedah ini sesuai untuk mendaftar komponen melalui Vue.component().

Mari lihat kaedah pertama dahulu Apabila membuat contoh Vue, anda boleh menentukan titik pelekap melalui atribut el, contohnya:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Ini akan melekapkan contoh Vue ke id. aplikasi pada elemen. Apabila data berubah, Vue akan mengemas kini secara automatik elemen DOM yang berkaitan dalam halaman.

Dalam komponen, memandangkan setiap komponen adalah bebas, unsur akar juga perlu dinyatakan secara berasingan. Ini boleh dicapai dengan menambahkan atribut el pada pilihan komponen, contohnya:

Vue.component('my-component', {
  template: '<p>{{ message }}</p>',
  data: function () {
    return {
      message: 'Hello Vue.js from component!'
    }
  },
  el: '#component-container'
})

Ini akan menjadikan komponen kepada elemen dengan bekas komponen id. Perlu diingat bahawa memandangkan komponen boleh digunakan semula, atribut el hanya berfungsi apabila komponen digunakan secara bersendirian Jika komponen bersarang dalam komponen lain, atribut el komponen induk akan digunakan.

Selain menggunakan atribut el untuk pemasangan, anda juga boleh melekap komponen secara manual melalui kaedah $mount(). Contohnya:

var vm = new Vue({
  template: '<p>{{ message }}</p>',
  data: {
    message: 'Hello Vue.js!'
  }
})
vm.$mount('#app')

Ini akan melekapkan tika Vue pada elemen dengan apl id. Perlu diingatkan bahawa jika atribut el tidak ditentukan, komponen perlu dipasang secara manual.

Ringkasnya, dalam Vue, atribut el digunakan untuk menentukan elemen akar komponen Dengan menggunakan atribut el secara rasional, pemasangan fleksibel dan penggunaan semula komponen boleh dicapai.

Atas ialah kandungan terperinci Cara menggunakan komponen el in vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!