लेख

लारवेल घटक क्या हैं और उनका उपयोग कैसे करें

लारवेल घटक एक उन्नत विशेषता है, जिसे लारवेल के सातवें संस्करण द्वारा जोड़ा गया है। इस लेख में हम यह देखने जा रहे हैं कि घटक क्या है, इसे कैसे बनाया जाए, ब्लेड मॉडल में घटकों का उपयोग कैसे किया जाए और पैरामीटर पास करके घटक को कैसे पैरामीटर किया जाए।

लारवेल घटक क्या है?

एक घटक कोड का एक टुकड़ा है जिसे हम किसी भी टेम्पलेट ब्लेड में पुन: उपयोग कर सकते हैं। यह सेक्शन, लेआउट, और शामिल करने जैसा कुछ है। उदाहरण के लिए, हम प्रत्येक टेम्प्लेट के लिए एक ही हेडर का उपयोग करते हैं, इसलिए हम एक हेडर घटक बना सकते हैं, जिसका हम पुन: उपयोग कर सकते हैं।

बेहतर समझ के लिए घटकों का एक अन्य उपयोग यह है कि आपको वेबसाइट पर कई जगहों जैसे हेडर, फुटर या वेबसाइट पर कहीं भी एक रजिस्टर बटन का उपयोग करने की आवश्यकता है।फिर उस बटन कोड का एक घटक बनाएं और उसका पुन: उपयोग करें।

Laravel में कंपोनेंट कैसे बनाएं

उदाहरण के लिए, चलिए एक घटक बनाते हैं Header के साथArtisan:

php artisan make:component Header

यह आदेश आपके लार्वेल प्रोजेक्ट में दो फाइलें बनाता है:

नाम के साथ एक PHP फ़ाइल Header.php निर्देशिका के अंदर app/http/View/Components;
और नाम के साथ एक HTML ब्लेड फ़ाइल header.blade.php निर्देशिका के अंदर resources/views/components/.

आप उपनिर्देशिका में घटक भी बना सकते हैं, जैसे:

php artisan make:component Forms/Button

यह आदेश निर्देशिका में एक बटन घटक बनाएगा App\View\Components\Forms और ब्लेड फाइल को रिसोर्सेज/व्यूज/कंपोनेंट्स/फॉर्म्स डायरेक्टरी में रखा जाएगा।

HTML ब्लेड फ़ाइल में घटक को रेंडर करने के लिए, हम इस सिंटैक्स का उपयोग करेंगे:

लारवेल घटकों का उदाहरण

पहले हम फाइल में कुछ HTML कोड डालते हैं header.blade.php घटक का।

<div><h1> Header Component </h1></div>

अब एक व्यू फाइल बनाएं users.blade.php संपत्ति फ़ोल्डर में, जहां हम हेडर घटक का उपयोग कर सकते हैं।

<x-header /><h1>User Page</h1>

अब, की प्रणाली के माध्यम से मार्ग laravel की, हम ब्राउज़र में परिणाम प्रदर्शित करने के लिए ब्लेड कहते हैं

लारवेल घटकों को डेटा कैसे पास करें

घटक को डेटा पास करने के लिए Blade निम्नलिखित सिंटैक्स का उपयोग किया जाता है, तत्व के अंदर पैरामीटर से संबंधित मान निर्दिष्ट करता है HTML:

<x-header message=”Utenti” />

उदाहरण के लिए, हमने पिछले घटक का उपयोग users.blade.php फ़ाइल में किया था।

तुम्हे करना चाहिए defiहेडर.php फ़ाइल में घटक डेटा को समाप्त करें। सभी सार्वजनिक चर डेटा घटक दृश्य के लिए स्वचालित रूप से उपलब्ध थे।

फ़ाइल में कोड जोड़ें एप/http/व्यू/कंपोनेंट्स/डायरेक्टरी के अंदर हेडर.php .

<?php

namespace App\View\Components;
use Illuminate\View\Component;

   class Header extends Component{

   /*** The alert type.** @var string*/

   public $title = "";

   public function __construct($message){

   $this->title = $message;

   }
}

जैसा कि आप देख सकते हैं, क्लास का कंस्ट्रक्टर मेथड वेरिएबल सेट करता है $title घटक को दिए गए पैरामीटर मान के साथ। अब चर जोड़ें $title घटक फ़ाइल में header.blade.php पिछले डेटा दिखाने के लिए।

<div> <h1> {{$title}}'s Header Component </h1> </div>

अब यह प्रेषित घटक डेटा ब्राउज़र में प्रदर्शित किया जाएगा।

इसी तरह, आप एक अन्य विज़ुअलाइज़ेशन फ़ाइल बनाकर, इस घटक का उपयोग दूसरे विज़ुअलाइज़ेशन पेज पर अलग-अलग डेटा के साथ कर सकते हैं blade contact.blade.php और पारित डेटा दिखाने के लिए नीचे घटक कोड जोड़ें।