Vue.js’de setup() Fonksiyonunda Props ve Context Kullan\u0131m\u0131<\/p>\n
Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle Vue.js’in Composition API’sindeki g\u00fc\u00e7l\u00fc ara\u00e7lar olan Vue.js’de props’lar, bir \u00fcst bile\u015fenden alt bile\u015fene veri aktarman\u0131n temel yoludur. Yukar\u0131daki \u00f6rnekte, Context, bir bile\u015fenin \u00f6tesinde veri payla\u015f\u0131m\u0131n\u0131 sa\u011flayan g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r. Bu \u00f6rnekte, Props ve context’i birlikte kullanarak g\u00fc\u00e7l\u00fc ve esnek bir veri y\u00f6netim stratejisi olu\u015fturabilirsiniz. \u00d6rne\u011fin, bir alt bile\u015fene hem props ile \u00f6zelle\u015ftirilebilir veriler hem de context ile genel veriler sa\u011flayabilirsiniz. Bu sayede, her bile\u015fenin kendi gereksinimlerine g\u00f6re \u00f6zelle\u015ftirilmesi m\u00fcmk\u00fcn olur.<\/p>\n Sonu\u00e7 olarak, #Etiketler: Vue.js, setup(), Props, Context, Composition API, Veri Y\u00f6netimi, Vue 3, reaktif, bile\u015fen, kod, programlama, web geli\u015ftirme<\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js’de setup() Fonksiyonunda Props ve Context Kullan\u0131m\u0131 Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle Vue.js’in Composition API’sindeki g\u00fc\u00e7l\u00fc…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-18938","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nsetup()<\/code> fonksiyonu i\u00e7inde props ve context kullan\u0131m\u0131n\u0131 detayl\u0131 olarak inceleyece\u011fiz. Bu makalede, Vue 3’\u00fcn Composition API’sini kullanarak bile\u015fenlerinizde veri y\u00f6netimini nas\u0131l kolayla\u015ft\u0131rabilece\u011finizi g\u00f6sterece\u011fim. Ayn\u0131 zamanda, props ve context’in birlikte nas\u0131l kullan\u0131labilece\u011fini ve bu yakla\u015f\u0131m\u0131n avantajlar\u0131n\u0131 ele alaca\u011f\u0131z.<\/p>\nProps’lar\u0131n setup() Fonksiyonunda Kullan\u0131m\u0131<\/h2>\n
setup()<\/code> fonksiyonu i\u00e7inde props’lara eri\u015fmek olduk\u00e7a basittir. Props, setup()<\/code> fonksiyonunun bir arg\u00fcman\u0131 olarak ge\u00e7irilir. \u0130\u015fte basit bir \u00f6rnek:<\/p>\n\n<template>\n <div>\n <p>Ad\u0131m: {{ isim }}<\/p>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n setup(props) {\n console.log(props.isim); \/\/ Props'a burada eri\u015febiliriz.\n return {\n isim: props.isim \/\/ Template'e isim de\u011fi\u015fkenini aktar\u0131r\u0131z.\n };\n }\n};\n<\/script>\n<\/code><\/pre>\nisim<\/code> adl\u0131 bir prop’u setup()<\/code> fonksiyonu i\u00e7inde ald\u0131k ve template’de kulland\u0131k. Bu sayede, \u00fcst bile\u015fenden alt bile\u015fene veri aktar\u0131m\u0131 kolayla\u015ft\u0131. Ayr\u0131ca, setup()<\/code> fonksiyonu i\u00e7indeki bu de\u011fi\u015fken, reaktiftir. De\u011fi\u015fti\u011finde, aray\u00fcz otomatik olarak g\u00fcncellenir. Bu, kodun daha okunabilir ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\nContext’in setup() Fonksiyonunda Kullan\u0131m\u0131<\/h2>\n
provide()<\/code> ve inject()<\/code> fonksiyonlar\u0131 ile context olu\u015fturup kullanabiliriz. \u00d6rne\u011fin, bir uygulama genelinde kullan\u0131lacak tema bilgilerini context ile payla\u015fabiliriz:<\/p>\n\n\/\/ App.vue\n<template>\n <div>\n <ChildComponent \/>\n <\/div>\n<\/template>\n\n<script>\nimport { provide } from 'vue';\nimport ChildComponent from '.\/ChildComponent.vue';\n\nexport default {\n components: { ChildComponent },\n setup() {\n const tema = { renk: 'mavi' };\n provide('tema', tema);\n return {};\n }\n};\n<\/script>\n\n\n\/\/ ChildComponent.vue\n<template>\n <div :style="{ backgroundColor: tema.renk }">\n <p>Ben bir alt bile\u015fenim.<\/p>\n <\/div>\n<\/template>\n\n<script>\nimport { inject } from 'vue';\n\nexport default {\n setup() {\n const tema = inject('tema');\n return { tema };\n }\n};\n<\/script>\n<\/code><\/pre>\nApp.vue<\/code> bile\u015feni tema<\/code> adl\u0131 bir context sa\u011flar ve ChildComponent<\/code> bu context’i kullan\u0131r. B\u00f6ylece, alt bile\u015fenler, \u00fcst bile\u015fenlerden veri alabilir. Bu, kodun daha mod\u00fcler ve yeniden kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar. \u00d6zellikle b\u00fcy\u00fck projelerde, bu y\u00f6ntemin avantajlar\u0131 daha net bir \u015fekilde ortaya \u00e7\u0131kar.<\/p>\nProps ve Context’in Birlikte Kullan\u0131m\u0131<\/h2>\n
setup()<\/code> fonksiyonu i\u00e7inde props ve context’i etkili bir \u015fekilde kullanarak, Vue.js uygulamalar\u0131n\u0131zda daha temiz, daha organize ve daha \u00f6l\u00e7eklenebilir bir kod yazabilirsiniz. Umar\u0131m bu makale, Vue.js ile \u00e7al\u0131\u015f\u0131rken bu \u00f6nemli konular\u0131 anlaman\u0131za yard\u0131mc\u0131 olmu\u015ftur. Daha fazla bilgi i\u00e7in fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz. Ayr\u0131ca Vue.js resmi dok\u00fcmanlar\u0131na da g\u00f6z atman\u0131z\u0131 tavsiye ederim: Vue.js Composition API Dok\u00fcmanlar\u0131<\/a><\/p>\n