آشنایی با کامپوننت‌ ها در vue js

برای آشنایی با کامپوننت در vue بهتر است ابتدا با template آشنا شویم.

template چیست ؟

به مثال زیر توجه کنید:

Vue.createApp({
    template: `کد های ما در این قسمت قرار می گیرند.`
})

مقادیری که در template قرار دارند با استفاده از id مورد نظر ما درون کد های html جایگزین می شوند ، درون template می توانیم از همه ویژگی های که vue در اختیار ما قرار داده مانند دایرکتیو ها v-if , v-for و... استفاده کنیم.

برای استفاده از template باید از (`) بک تیک استفاده کرد.

کامپوننت چیست ؟

کامپوننت به معنای بخش است و یک وبسایت از بخش های مختلفی مانند header ، footer و ... تشکیل شده است.

از ویژگی های کامپوننت می توان به استفاده ی بیشمار از آن ها در هرکجا از وب سایت که نیاز است نام برد ، همچنین برای تغییر همه ی کامپوننت های استفاده شده فقط یک بار تغییر کافی است و نیاز به تغییر همه کامپوننت ها نیست.

کامپننت یک ابجکت است و شامل تمامی مقادیری که در vue استفاده می شد مانند methods ، computed و ... می باشد.

مثالی از کامپوننت ها به صورت local :

  Vue.createApp({

    components:{
        web
    },
    template:`<span>{{name}}</span> <Web/>  `
})

const Web = {
    template:`<div><h3>{{name}}</h3></div>`,
    data(){
        return {
            name: 'topdemy.ir'
        }
    }
}

مثالی از کامپوننت ها به صورت golbal :

  const app = Vue.createApp({

    template:`<span>{{name-component}}</span> <Web/>  `
})

app.mount("#app")

app.component("name-component" , {

    template:`<span>{{name}}</span>`,

    data(){
        return {
            name:"topdemy.ir"
        }
    }
}
);

از آنجایی که شیء Vue فقط خصوصیات یک داده را render می کند و ما نمی توانیم در vue.js ویژگی های یک داده را در چند قسمت از برنامه خود استفاده کنیم ، برای رفع این مشکل ما از کامپوننت ها و دستور Vue.component که در واقع یک شیء از Vue است استفاده می کنیم .

در کامپوننت ها آرگومان اول نام تگ دلخواه است و آرگومان دوم همان شیء Vue است .

مثالی دیگر از کاپوننت ها :

Vue.component('name_Tage', {
    Data() {
return {

        text: 'test'
}
    },
    template: '<p> {{ text }}</p>'
});

<div id="app">
    <name_Tage>

    </name_Tage>
</div>

با استفاده از نام همین تگی که در کامپوننت خود ایجاد کردیم می توانیم به دفعات دلخواه از آن استفاده کنیم.

نکاتی که باید هنگام استفاده از کامپننت ها به آن توجه کرد :

در هنگام نامگذاری کامپوننت از یک نام خاص استفاده کنید تا به مشکل برنخورید.

باید توجه کرد data که در قسمت کامپوننت ها مورد استفاده قرار می گیرد از نوع تابع بوده و با data که در vue ما قرار دارد متفاوت است.

single file component چیست ؟

فرض کنید تعداد زیادی کاپوننت داشته باشیم ، برای جلو گیری از سردرگمی هر کامپننت را درون یک فایل قرار می دهیم که به آن single file component می گویند.

پسوند فایل های که ایجاد میکنیم vue است.

این فایل از سه بخش :

template : که در واقع مانند template مثال های بالا است و تگ های html ما قرار میگیرد.

script : که شامل کد های جاوا اسکریپتی و vue می باشد.

style : که برای استایل دهی کامپوننت ما استفاده می شود.

برای استفاده از single file component های خود به راحتی فایل را import می کنیم.

مثالی از single file component :

  <template>
    <div>
        <h2>{{name}}</h2>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name : "topdemy.ir"
            }
        },
    }
</script>

<style>

</style>