Mixin dalam Vue ialah cara mudah untuk menggunakan semula komponen. Ia boleh merangkum beberapa logik yang biasa digunakan ke dalam campuran dan menyuntiknya ke dalam berbilang komponen untuk digunakan semula, sekali gus meningkatkan kadar penggunaan semula kod dan kecekapan pembangunan. Vue memperkenalkan fungsi mixin global dalam versi 2.2.0, yang boleh menyuntik mixin ke dalam semua komponen Artikel ini akan memperkenalkan cara melaksanakan mixin global dalam Vue dan membincangkan kelebihan dan kekurangannya.
Untuk mencampurkan mixin secara global dalam Vue, kita perlu menggunakan fungsi Vue.mixin
. Fungsi ini menerima objek mixin sebagai parameter, dan objek mixin ini boleh mentakrifkan pelbagai sifat dan kaedah yang sama seperti komponen.
const myMixin ={ methods: { // ... } } Vue.mixin(myMixin)
Kini, kami secara global mendapati kaedah dalam objek myMixin
boleh diakses oleh semua komponen.
Jadi, apa yang berlaku apabila kita mentakrifkan sifat atau kaedah dengan nama yang sama dengan mixin dalam komponen? Keutamaan mixin Vue mengikut peraturan dari bawah ke atas dan kiri ke kanan, iaitu sifat atau kaedah dengan nama yang sama dalam campuran atau komponen yang ditakrifkan kemudian akan mengatasi sifat atau kaedah sebelumnya.
Contohnya:
const mixinA ={ created() { console.log('mixinA created') }, methods: { foo() { console.log('mixinA foo') } } } const mixinB ={ created() { console.log('mixinB created') }, methods: { foo() { console.log('mixinB foo') } } } const myComponent ={ created() { console.log('myComponent created') }, mixins: [mixinA, mixinB], methods: { foo() { console.log('myComponent foo') } } } new Vue({ el: '#app', components: { 'my-component': myComponent } }) // 输出 // mixinA created // mixinB created // myComponent created
Dalam contoh di atas, kami mentakrifkan dua campuran (mixinA dan mixinB), dan satu komponen (myComponent). Antaranya, fungsi cangkuk yang dicipta dan kaedah foo kedua-duanya ditakrifkan dalam mixinA dan mixinB, dan kaedah foo dengan nama yang sama juga ditakrifkan dalam myComponent. Pada akhirnya, Vue akan mengatasi mengikut keutamaan sifat atau kaedah dengan nama yang sama dalam mixin atau komponen yang ditakrifkan kemudian:
myComponent created
Ini menunjukkan bahawa sifat atau kaedah dengan. nama yang sama dalam mixin dan komponen akan bertanggungjawab mengatasi sifat atau kaedah dalam mixin.
Walaupun mixin global boleh dengan mudah merangkum logik perniagaan ke dalam mixin dan menggunakannya semula dalam pelbagai komponen, terdapat juga banyak masalah yang berpotensi.
Berdasarkan kelebihan dan kekurangan di atas, kita boleh memilih pencampuran global untuk merangkum dan menggunakan semula logik perniagaan mengikut senario perniagaan tertentu, atau menggunakan teknologi guna semula lain, seperti fungsi slot dan render, untuk lebih baik Mengurus dan mengekalkan kod.
Campuran global ialah cara mudah untuk merangkum logik yang biasa digunakan ke dalam campuran untuk digunakan semula berbilang komponen. Walau bagaimanapun, jika digunakan secara tidak wajar, mungkin terdapat masalah seperti konflik penamaan kod dan isu liputan, kod logik yang berselerak dan gandingan yang meningkat antara komponen. Oleh itu, apabila menggunakan campuran global, anda mesti memilih kaedah yang sesuai untuk enkapsulasi logik dan penggunaan semula kod berdasarkan senario perniagaan tertentu.
Atas ialah kandungan terperinci Bagaimana untuk mencampurkan campuran secara global dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!