Berikut ini adalah terjemahan bebas artikel " 10 Kiat & Trik untuk menjadikan Anda Pengembang VueJS yang lebih baik " dari Dev.to. Penulis akan memberi tahu kami tentang opsi menarik dan berguna untuk menggunakan alat VueJS yang biasa.
Pendahuluan
Saya sangat menikmati bekerja dengan VueJS dan setiap kali saya melakukan ini, saya menyelami lebih dalam kemampuan dan fitur-fiturnya. Pada artikel ini, saya sajikan kepada Anda 10 tips dan trik keren yang mungkin tidak Anda ketahui dan akan mencoba membantu Anda menjadi pengembang terbaik di VueJS.
Mari kita buat sintaks slot yang indah
Dengan rilis Vue 2.6, singkatan untuk slot menjadi tersedia, yang dapat digunakan sebagai acara (misalnya, singkatan @click untuk v-on:click ) atau titik dua untuk pengikatan data ( :src ). Jika Anda memiliki misalnya komponen tabel, maka Anda dapat menggunakan fitur berikut:
<template> ... <my-table> <template #row="{ item }"> /* some content here. You can freely use 'item' here */ </template> </my-table> ... </template>
$ on ('kait:')
Ini adalah fitur keren yang dapat Anda gunakan jika Anda perlu mendefinisikan pendengar acara khusus atau plugin pihak ketiga di kait yang created atau mounted dan Anda harus menghapusnya di kait beforeDestroy untuk mencegah kebocoran memori. Dengan menggunakan $on('hook:') Anda dapat mendefinisikan atau menghapus suatu peristiwa hanya dalam satu hook.
mounted() { const aThirdPartyPlugin = aThirdPartyPlugin() this.$on('hook:beforeDestroy', () => { aThirdPartyPlugin.destroy() }) }
Alat peraga validasi
Mungkin Anda sudah tahu bahwa mungkin untuk memvalidasi alat peraga Anda dengan nilai-nilai primitif, seperti String , Number atau Object . Tetapi Anda juga dapat membuat validator khusus, misalnya untuk memeriksa array string:
alertType: { validator: value => ['signup', 'login', 'logout'].includes(value) }
Argumen direktif dinamis
Salah satu fitur paling keren dari VueJS 2.6 adalah kemampuan untuk secara dinamis menentukan argumen arahan komponen. Misalkan Anda memiliki komponen tombol dan ingin mendengarkan acara Click dalam kondisi tertentu, dan acara DoubleClick dalam semua kasus lainnya. Ini adalah kasus di mana arahan semacam itu mungkin berguna:
<template> ... <aButton @[someEvent]="handleSomeEvent()"/> ... </template> <script> ... data(){ return{ ... someEvent: someCondition ? "click" : "dblclick" } }, methods:{ handleSomeEvent(){ // handle some event } } ... </script>
Dan apa yang benar-benar keren -> ini adalah Anda dapat menerapkan templat ini ke atribut HTML dinamis, properti, dan banyak lagi!
Menggunakan kembali komponen untuk rute serupa
Terkadang Anda memiliki rute berbeda yang menggunakan beberapa set komponen. Jika Anda beralih di antara rute tersebut, maka secara default komponen umum tidak akan digambar ulang, karena Vue akan menggunakan kembali komponen ini untuk kinerja yang lebih baik. Tetapi jika Anda ingin menggambar ulang komponen-komponen ini, Anda dapat mendefinisikan :key properti :key di Router-View-Component :
<template> <router-view :key="$route.fullPath"></router-view> </template>
Lewati semua alat peraga dari komponen induk ke anak
Ini adalah fitur yang sangat keren untuk meneruskan semua alat peraga dari komponen induk ke komponen turunan. Metode ini nyaman jika, misalnya, Anda menggunakan komponen pembungkus. Jadi, alih-alih meneruskan semua properti secara berurutan, yang harus Anda lakukan adalah meneruskannya sekaligus:
<template> <childComponent v-bind="$props"/> </template>
Sebaliknya:
<template> <childComponent :prop1="prop1" :prop2="prop2" :prop3="prop3" :prop4="prop4" ... /> </template>
Lewati semua pendengar acara dari komponen induk ke anak
Jika Anda memiliki komponen anak yang bukan root untuk komponen induk, Anda dapat mewariskan semua pendengar acara dari orangtua ke anak seperti ini:
<template> <div> ... <childComponent v-on="$listeners"/> ... </div> </template>
Jika komponen anak adalah akar dari induk, maka Anda tidak akan memerlukan trik seperti itu dan semua acara akan tersedia secara default.
$ createElement
Setiap instance Vue memiliki akses secara default ke metode $createElement , yang membuat dan mengembalikan node virtual. Ini dapat digunakan, misalnya, untuk menggunakan markup dalam metode yang dapat diteruskan ke arahan v-html . Dalam komponen fungsional, metode ini tersedia sebagai argumen pertama ke fungsi render .
Menggunakan JSX
Dimulai dengan Vue CLI 3 , dukungan JSX telah muncul secara default. Sekarang Anda dapat menulis kode Anda menggunakan JSX (misalnya, jika Anda lebih nyaman setelah reaksi), itu juga bisa lebih nyaman, misalnya, untuk menulis komponen fungsional. Jika Anda belum menggunakan Vue CLI 3 , maka Anda dapat menggunakan babel-plugin-transform-vue-jsx untuk mendukung JSX dalam proyek Anda.
Model-v khusus
Secara default, v-model adalah apa yang kita sebut gula sintaksis di atas @input dan :value event :value . Tetapi Anda dapat menentukan properti model dalam komponen Vue Anda dan menentukan acara dan alat peraga mana yang akan digunakan:
export default: { model: { event: 'change', prop: 'checked' } }
Kesimpulan
Saya harap saya bisa memberi Anda beberapa tips untuk membantu Anda menjadi pengembang VueJS terbaik.