{"id":12596,"date":"2025-02-16T03:45:10","date_gmt":"2025-02-16T00:45:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/vue-3-projeleriniz-icin-tekrar-kullanilabilir-ui-bloklari\/"},"modified":"2025-02-16T03:45:10","modified_gmt":"2025-02-16T00:45:10","slug":"vue-3-projeleriniz-icin-tekrar-kullanilabilir-ui-bloklari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-3-projeleriniz-icin-tekrar-kullanilabilir-ui-bloklari\/","title":{"rendered":"Vue 3 Projeleriniz \u0130\u00e7in Tekrar Kullan\u0131labilir UI Bloklar\u0131"},"content":{"rendered":"

Vue 3 Projeleriniz \u0130\u00e7in Tekrar Kullan\u0131labilir UI Bloklar\u0131<\/p>\n

Merhaba! Ben Fatih Soysal ve bu yaz\u0131da, Vue 3 projelerinizde tekrar kullan\u0131labilir UI (Kullan\u0131c\u0131 Aray\u00fcz\u00fc) bloklar\u0131 olu\u015fturman\u0131n \u00f6nemini ve nas\u0131l yap\u0131laca\u011f\u0131n\u0131 detayl\u0131 olarak ele alaca\u011f\u0131z. Tekrar kullan\u0131labilir bile\u015fenler, kod tekrar\u0131n\u0131 azalt\u0131r, tutarl\u0131l\u0131\u011f\u0131 sa\u011flar ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r. Bu sayede daha verimli ve \u00f6l\u00e7eklenebilir uygulamalar geli\u015ftirebilirsiniz.<\/p>\n

Neden Tekrar Kullan\u0131labilir Bile\u015fenler \u00d6nemli?<\/h2>\n

Tekrar kullan\u0131labilir bile\u015fenler, geli\u015ftirme s\u00fcrecini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. \u00d6ncelikle, kod tekrar\u0131n\u0131 ortadan kald\u0131rarak, bak\u0131m ve g\u00fcncelleme i\u015flemlerini kolayla\u015ft\u0131r\u0131r. Ayr\u0131ca, t\u00fcm uygulaman\u0131zda tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm ve his sa\u011flar. Yeni bir \u00f6zellik eklemek veya mevcut bir bile\u015feni g\u00fcncellemek istedi\u011finizde, bunu tek bir yerde yapman\u0131z yeterli olur. Bu da zamandan ve emekten tasarruf etmenizi sa\u011flar. Dahas\u0131, test s\u00fcreci de basitle\u015fir \u00e7\u00fcnk\u00fc her bile\u015feni ayr\u0131 ayr\u0131 test edebilirsiniz.<\/p>\n

Vue 3’te Tekrar Kullan\u0131labilir Bile\u015fenler Olu\u015fturma<\/h2>\n

Vue 3’te bile\u015fen olu\u015fturmak olduk\u00e7a basittir. \u00d6ncelikle, bir .vue dosyas\u0131 olu\u015fturman\u0131z gerekir. Bu dosya, bile\u015feninizin \u015fablonunu (template), stilini (style) ve mant\u0131\u011f\u0131n\u0131 (script) i\u00e7erir. A\u015fa\u011f\u0131da basit bir \u00f6rnek bulunmaktad\u0131r:<\/p>\n

\n<template>\n  <div class=\"button\">\n    <button @click=\"onClick\">{{ buttonText }}<\/button>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  name: 'ReusableButton',\n  props: {\n    buttonText: {\n      type: String,\n      default: 'T\u0131kla'\n    }\n  },\n  methods: {\n    onClick() {\n      console.log('Butona t\u0131kland\u0131!');\n    }\n  }\n};\n<\/script>\n\n<style scoped>\n.button {\n  \/* Buton stilleri *\/\n}\n<\/style>\n<\/code><\/pre>\n
Bu \u00f6rnekte, buttonText<\/code> prop’u ile butonun metnini \u00f6zelle\u015ftirebilirsiniz.  onClick<\/code> metodu ise butona t\u0131kland\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r.  scoped<\/code> \u00f6zelli\u011fi, stillerin sadece bu bile\u015fenin i\u00e7inde ge\u00e7erli olmas\u0131n\u0131 sa\u011flar.  Bu bile\u015feni di\u011fer bile\u015fenlerde veya sayfalarda tekrar kullanabilirsiniz.  Bu \u015fekilde kodunuz daha temiz, daha organize ve daha s\u00fcrd\u00fcr\u00fclebilir olur.  Bunu daha da geli\u015ftirmek i\u00e7in,  props’lar\u0131 kullanarak bile\u015fenlerinizi \u00f6zelle\u015ftirebilirsiniz.  \u00d6rne\u011fin, butonun rengini, boyutunu veya ikonunu prop’lar ile kontrol edebilirsiniz.<\/p>\n
Bile\u015fenleri Projelerinizde Kullanma<\/h2>\n
Olu\u015fturdu\u011funuz bile\u015feni ba\u015fka bir bile\u015fende veya ana uygulaman\u0131zda kullanmak i\u00e7in,  <ReusableButton><\/code> etiketiyle \u00e7a\u011f\u0131rman\u0131z yeterlidir.  \u00d6rne\u011fin, a\u015fa\u011f\u0131daki gibi:<\/p>\n
\n<template>\n  <div>\n    <ReusableButton buttonText=\"Kaydet\"><\/ReusableButton>\n    <ReusableButton buttonText=\"\u0130ptal\"><\/ReusableButton>\n  <\/div>\n<\/template>\n<\/code><\/pre>\n
Bu sayede, ayn\u0131 buton bile\u015fenini farkl\u0131 metinlerle tekrar kullanm\u0131\u015f olduk.  Bu yakla\u015f\u0131m, kodunuzun okunabilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131r\u0131r.  Ayr\u0131ca,  tekrar kullan\u0131labilir bile\u015fenler olu\u015fturmak i\u00e7in Component Library kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz.   Bu k\u00fct\u00fcphaneler, \u00f6nceden olu\u015fturulmu\u015f ve test edilmi\u015f bile\u015fenler sunar ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.<\/p>\n
\u00d6zet<\/h2>\n
Vue 3 ile tekrar kullan\u0131labilir UI bloklar\u0131 olu\u015fturarak,  projenizin kalitesini, s\u00fcrd\u00fcr\u00fclebilirli\u011fini ve \u00f6l\u00e7eklenebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilirsiniz. Kod tekrar\u0131n\u0131 azalt\u0131r, tutarl\u0131l\u0131\u011f\u0131 sa\u011flar ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.  Bu y\u00f6ntemlerle daha verimli ve daha ba\u015far\u0131l\u0131 projeler geli\u015ftirebilirsiniz.  Daha fazla bilgi i\u00e7in fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz.<\/p>\n
Faydal\u0131 bulabilece\u011finiz di\u011fer kaynaklar:<\/p>\n