Mari analisa secara ringkas pemalam dan komponen dalam Vue dan bercakap tentang perbezaannya!

Apakah komponen itu? Apakah pemalam? Artikel berikut akan membawa anda melalui pemalam dan komponen dalam Vue dan bercakap tentang perbezaan antara pemalam dan komponen saya harap ia akan membantu anda!

1. Apakah itu komponen? ialah gabungan grafik, Pelbagai logik bukan grafik disarikan kepada satu konsep (komponen) untuk melaksanakan model pembangunan Setiap fail dalam

boleh dianggap sebagai komponen. (Belajar perkongsian video:

tutorial video vue

)

VueKelebihan komponen.vueKurangkan gandingan keseluruhan sistem Sambil mengekalkan antara muka tidak berubah, kami Komponen yang berbeza boleh digantikan untuk melengkapkan keperluan dengan cepat, seperti kotak input, yang boleh digantikan dengan komponen seperti kalendar, masa, julat, dll. untuk pelaksanaan tertentu

Penyahpepijatan adalah mudah, kerana keseluruhan sistem digabungkan melalui komponen, apabila masalah timbul Kadangkala, anda boleh menggunakan kaedah penyingkiran untuk mengalih keluar komponen secara terus, atau mencari masalah dengan cepat berdasarkan komponen yang melaporkan ralat Sebab mengapa anda boleh mengesan masalah dengan cepat adalah kerana setiap komponen mempunyai gandingan yang rendah dan tanggungjawab tunggal, jadi logiknya lebih mudah daripada menganalisis keseluruhan sistem

Meningkatkan kebolehselenggaraan Memandangkan setiap komponen mempunyai tanggungjawab tunggal dan komponen digunakan semula dalam sistem, mengoptimumkan kod boleh mencapai peningkatan keseluruhan sistem<.>

• 2. Apakah itu pemalam
• Pemalam biasanya digunakan untuk menambah fungsi global pada
. Tiada sekatan ketat pada skop fungsi pemalam - secara amnya terdapat jenis berikut:

Tambah kaedah atau sifat global. Contohnya:

Tambah sumber global: arahan/penapis/peralihan, dsb. Contohnya, Vue

menambah beberapa pilihan komponen melalui gabungan global. Contohnya,
• vue-custom-element
menambah
• kaedah contoh dengan menambahkannya pada vue-touch.
• Perpustakaan yang menyediakan vue-router sendiri sambil menyediakan satu atau lebih fungsi yang dinyatakan di atas. Seperti
• VueVue.prototype
3. Perbezaan antara keduanya
• APIvue-routerPerbezaan antara kedua-duanya tercermin terutamanya dalam aspek berikut:

Borang penulisanBorang pendaftaran

Senario penggunaan

• Borang penulisan
• Menulis komponen

Terdapat banyak cara untuk menulis komponen yang paling biasa ialah format fail tunggal Setiap

fail boleh dianggap sebagai komponen

Format standard fail

vueKami juga boleh menulis komponen melalui atribut .vue Jika kandungan komponen besar, kami boleh menentukan kandungan komponen

Jika kandungan komponen adalah tidak Ramai, kita boleh terus menulis pada atribut

vue

<template>
</template>
<script>
export default{ 
    ...
}
</script>
<style>
</style>

untuk menulis pemalam templatetemplatetemplate

Pelaksanaan pemalam harus mendedahkan kaedah

<template id="testComponent">     // 组件显示的内容
    <div>component!</div>   
</template>

Vue.component(&#39;componentA&#39;,{ 
    template: &#39;#testComponent&#39;  
    template: `<div>component</div>`  // 组件内容少可以通过这种形式
})

. Parameter pertama kaedah ini ialah

pembina, dan parameter kedua ialah objek pilihan pilihan

Borang pendaftaranvueinstallVue

Pendaftaran komponen

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

Pendaftaran komponen terbahagi terutamanya kepada pendaftaran global dan pendaftaran tempatan

Pendaftaran global adalah melalui kaedah , parameter pertama ialah nama komponen, kedua Parameter ialah item konfigurasi masuk

1vue

Pendaftaran separa hanya perlu mendaftarkan komponen melalui atribut

di mana ia digunakan Vue.component

Vue.component('my-component-name', { /* ... */ })

Pendaftaran pemalam

componentsPendaftaran pemalam didaftarkan (dipasang) melalui

Parameter pertama ialah nama pemalam, dan parameter kedua adalah pilihan item konfigurasi

const component1 = {...} // 定义一个组件

export default {
	components:{
		component1   // 局部注册
	}
}

Nota:

Apabila mendaftarkan pemalam, ia perlu dilengkapkan sebelum memanggil

untuk memulakan aplikasi secara automatik akan menghalang pendaftaran berbilang pemalam yang sama Ia hanya akan didaftarkan sekali Vue.use()

Vue.use(插件名字,{ /* ... */} )

Senario Penggunaan

Khususnya telah diterangkan dalam bab tentang apa palam itu. -in ialah. Berikut ialah ringkasannew Vue()

Komponen

Ia adalah modul perniagaan yang digunakan untuk membentuk Vue.use anda ialah

Plug-in ialah modul berfungsi yang digunakan untuk meningkatkan timbunan teknologi anda Matlamatnya ialah

itu sendiri

Ringkasnya, pemalam merujuk kepada peningkatan atau tambahan kepada fungsi

(Component)App. (Belajar perkongsian video: App.vuePembangunan bahagian hadapan web

,

Video pengaturcaraan asas (Plugin))Vue

Atas ialah kandungan terperinci Mari analisa secara ringkas pemalam dan komponen dalam Vue dan bercakap tentang perbezaannya!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!