Apakah perbezaan antara pemalam dan komponen dalam vue

Perbezaan: 1. Komponen didaftarkan melalui atribut "Vue.component" atau "components", manakala pemalam adalah melalui "Vue.use()" 2. Komponen digunakan untuk membentuk modul perniagaan App, dan matlamatnya Ia adalah "App.vue", dan pemalam ialah modul berfungsi yang digunakan untuk meningkatkan tindanan teknologi, dan sasarannya ialah Vue sendiri.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

1. Apakah komponen

Semak definisi komponen sebelumnya:

Komponen adalah untuk mengabstrak pelbagai logik grafik dan bukan grafik ke dalam konsep bersatu (komponen ) untuk melaksanakan model pembangunan, setiap Vue fail dalam .vue boleh dianggap sebagai komponen

Kelebihan komponen

• Kurangkan gandingan keseluruhan sistem Ijazah, sambil mengekalkan antara muka tidak berubah, kami boleh menggantikan komponen yang berbeza untuk melengkapkan keperluan dengan cepat Contohnya, kotak input boleh digantikan dengan kalendar, masa, julat dan komponen lain untuk pelaksanaan tertentu

• <.>Mudah untuk nyahpepijat Memandangkan keseluruhan sistem terdiri daripada komponen, apabila masalah berlaku, anda boleh menggunakan kaedah penyelesaian masalah untuk mengalih keluar komponen secara langsung, atau mencari masalah dengan cepat berdasarkan komponen yang melaporkan ralat itu boleh didapati dengan cepat adalah kerana setiap komponen Gandingan rendah dan tanggungjawab tunggal, jadi logiknya akan lebih mudah daripada menganalisis keseluruhan sistem

• Meningkatkan kebolehselenggaraan, kerana setiap komponen mempunyai tanggungjawab tunggal, dan komponen digunakan semula dalam sistem , jadi dengan mengoptimumkan kod boleh mencapai peningkatan keseluruhan sistem

2. Apakah pemalam

Pemalam itu? biasanya digunakan untuk menambah fungsi global pada

. Tiada sekatan ketat pada skop fungsi pemalam - secara amnya terdapat jenis berikut: Vue

Tambah kaedah atau sifat global. Contohnya:
• vue-custom-element
Tambah sumber global: arahan/penapis/peralihan, dsb. Contohnya,
• vue-touch
menambah beberapa pilihan komponen melalui campuran global. Contohnya,
• vue-router
menambah
• kaedah contoh dengan menambahkannya pada Vue. Vue.prototype
Perpustakaan yang menyediakan
• sendiri sambil menyediakan satu atau lebih fungsi yang dinyatakan di atas. Seperti APIvue-router

3. Perbezaan antara keduanya

Perbezaan antara keduanya terutama tercermin dalam aspek berikut:

Penulisan borang
• Borang pendaftaran
• Senario penggunaan

Borang penulisan

Komponen penulisan

Terdapat banyak cara untuk menulis komponen Yang paling biasa ialah

format fail tunggal Setiap vue fail boleh dianggap sebagai satu komponen .vue

Kita juga boleh menulis komponen melalui atribut vue Jika komponen mempunyai banyak kandungan, kita boleh menentukan kandungan komponen

Jika komponen tidak mempunyai banyak kandungan , kita boleh menulisnya terus Pada atribut

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

templatetemplatetemplate menulis pemalam

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

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

pelaksanaan pemalam harus mendedahkan kaedah. Parameter pertama kaedah ini ialah

pembina, dan parameter kedua ialah objek pilihan pilihan

vueinstallVueBorang pendaftaran

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

Pendaftaran komponen terbahagi terutamanya kepada pendaftaran global dan pendaftaran tempatan

Pendaftaran global adalah melalui kaedah

, parameter pertama ialah nama komponen, kedua Setiap parameter ialah item konfigurasi masuk vue

Pendaftaran separa hanya perlu mendaftarkan komponen melalui atribut Vue.component di mana ia digunakan

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

componentsPlug-in pendaftaran

const component1 = {...} // 定义一个组件export default {
    components:{
        component1   // 局部注册
    }}

Pemalam didaftarkan (dipasang) melalui Parameter pertama ialah nama pemalam, dan parameter kedua ialah item konfigurasi pilihan <🎜. >

Nota:

Vue.use() Apabila mendaftarkan pemalam, ia perlu dilengkapkan sebelum memanggil

untuk memulakan aplikasi

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

akan menghalang berbilang pendaftaran secara automatik pemalam yang sama dan hanya akan mendaftarkannya sekali

new Vue()

Senario Penggunaan

Vue.use

Spesifiknya telah diterangkan dalam bab Apakah itu pemalam Berikut ialah ringkasan

Komponen digunakan untuk membentuk modul perniagaan

anda, matlamatnya ialah

Plug-in (Component) ialah modul berfungsi yang digunakan untuk meningkatkan teknologi anda stack, matlamatnya adalah App sendiri App.vue

mudah Secara umumnya, pemalam merujuk kepada penambahbaikan atau tambahan kepada fungsi

(Plugin)Vue[Cadangan berkaitan: "

vue. tutorial js

"]Vue

Atas ialah kandungan terperinci Apakah perbezaan antara pemalam dan komponen dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!