Rujukan dan kaedah capaian komponen dalam dokumen Vue

Vue ialah rangka kerja JavaScript yang boleh digunakan untuk membina antara muka pengguna. Pada teras Vue ialah sistem komponen, yang membolehkan anda memecahkan UI anda kepada bahagian bebas dan boleh digunakan semula. Artikel ini akan memperkenalkan kaedah rujukan dan capaian komponen dalam dokumen Vue.

Komponen Vue ialah blok kod boleh guna semula yang mempunyai templat, logik dan gaya JavaScript sendiri. Komponen Vue boleh menerima sifat dan acara serta menyediakan pilihan seperti cangkuk kitaran hayat.

Dalam Vue, terdapat dua cara untuk membuat komponen: pendaftaran global dan pendaftaran tempatan. Pendaftaran global membolehkan anda menggunakan komponen sepanjang aplikasi anda, manakala pendaftaran tempatan hanya membenarkan komponen digunakan dalam komponen induknya.

Daftar komponen secara global:

Dalam Vue, anda boleh mendaftar komponen secara global menggunakan kaedah Vue.component(). Kaedah ini menerima dua parameter: nama komponen dan objek pilihan komponen. Berikut ialah contoh mudah:

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

Kod di atas mentakrifkan komponen bernama "komponen saya" dan menentukan templatnya. Kini, komponen ini boleh digunakan dalam mana-mana contoh Vue dalam projek.

Daftar komponen secara setempat:

Dalam Vue, anda boleh mendaftar komponen secara setempat menggunakan pilihan komponen. Pilihan ini ditakrifkan dalam contoh atau komponen Vue. Berikut ialah contoh mudah:

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '<div>这是我的组件</div>'
    }
  }
})

Kod di atas mentakrifkan komponen yang dipanggil "komponen saya" dan mendaftarkannya secara setempat dalam tika Vue menggunakan pilihan komponen. Komponen kini hanya tersedia dalam elemen akar tika Vue (#app).

Kaedah akses komponen:

Untuk menggunakan komponen, anda mesti merujuknya dalam contoh Vue atau templat komponen lain. Dalam templat, anda boleh menggunakan nama komponen sebagai nama teg bagi elemen tersuai. Sebagai contoh, jika anda mempunyai komponen yang dipanggil "komponen saya", anda boleh menggunakan kod berikut dalam templat anda:

<my-component></my-component>

Vue akan menggantikan komponen saya secara automatik dengan templat komponen dan menggunakan pilihan dan atribut komponen untuk mengisinya.

Di dalam komponen, anda boleh mengakses tika Vue induk menggunakan ini.$induk atau ini.$akar. Selain itu, anda boleh menggunakan prop dan pilihan acara dalam pilihan komponen untuk menghantar data dan acara.

Pilihan prop membolehkan anda menghantar data kepada komponen. Dalam komponen, sifat ini boleh diakses melalui this.propName. Berikut ialah contoh mudah:

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

Dalam contoh ini, komponen "komponen saya" mentakrifkan "mesej" sifat rentetan jenis. Dalam komponen, anda boleh menggunakan pengikatan templat untuk memasukkan sifat ini ke dalam templat komponen.

<my-component message="Hello World"></my-component>

Dalam contoh ini, kami menghantar rentetan "Hello World" sebagai sifat mesej komponen. Dalam komponen, Vue akan mengikat sifat ini pada templat yang sepadan dan memaparkannya dalam hasilnya. Pilihan

acara membolehkan anda menghantar acara kepada komponen. Apabila komponen menyalakan peristiwa, komponen lain atau tika Vue boleh menangkap peristiwa ini dan bertindak balas dengan sewajarnya. Berikut ialah contoh mudah:

Vue.component('my-component', {
  template: '<button v-on:click="onClick">Click me</button>',
  methods: {
    onClick: function () {
      this.$emit('my-event')
    }
  }
})

var vm = new Vue({
  el: '#app',
  methods: {
    onMyEvent: function () {
      alert('My event was triggered in parent component')
    }
  }
})

Dalam contoh ini, komponen "my-component" mentakrifkan acara klik dan menggunakan kaedah this.$emit() untuk mencetuskan acara bernama "my-event" Custom peristiwa. Kemudian, dalam contoh Vue, anda boleh menggunakan arahan v-on untuk menangkap acara tersuai dan mencetuskan fungsi panggil balik.

<my-component v-on:my-event="onMyEvent"></my-component>

Dalam contoh ini, kami menghantar nama kaedah yang dipanggil "onMyEvent", yang dipanggil apabila komponen menyalakan acara "my-event".

Kesimpulan:

Komponen ialah salah satu bahagian teras aplikasi Vue, yang memudahkan untuk membina antara muka pengguna yang boleh digunakan semula dan boleh dikembangkan. Dalam dokumen Vue, kaedah rujukan dan akses komponen termasuk pendaftaran global dan tempatan, pilihan prop dan pilihan acara. Memahami dan menguasai teknologi ini boleh memudahkan anda membina aplikasi Vue.

Atas ialah kandungan terperinci Rujukan dan kaedah capaian komponen dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!