یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها
استفاده از تخفیف‌ها
اضافه کردن پویای کامپونننت ها به یک کامپوننت در vuejs
درود و خسته نباشید مهندسین عزیز.
آقا میخام به صورت کاملا پویا به یک کامپوننت، کامپوننت هایی رو اضافه کنم .این عمل اصلا ممکنه ایا ؟ یک سری تلاش ها هم داشتم که میزارم ببینید :
نکته : نمیخام به صورت global کامپوننت هام ثبت بشوند. بنا به دلایلی.پس این رو جواب نگین لطفا.
این کد کار نمیکند البته .
<template>
<div>
</div>
</template>
<script>
export default {
name: 'tab_maker',
props: {
components_: {
type: Array,
default: [],
},
},
components: {
// how can add components in here ?
},
data() {
return {}
},
created() {
var self=this;
this.components_.forEach((item)=>{
Object.entries(item).forEach(([key, value]) => {
// key = component name
// value = object component
// ????
// add component in props in object componenents
self.components[key]=value;// not work ? TODO
// ?????
});
})
},
}
</script>
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
نظرتون در مورد این روش چیه؟
که ما کامپوننت هایی که ما میخوایم در فایل main.js رجیستر کنیم و در vue router با متا دیتا کامپونت مورد نظر فراخوانی کنیم .
به عنوان مثال من دو کامپوننت دارم که یکی برای پنل ادمین و یکی برای صفحه اصلی من این کامپوننت ها در main.js ریجستر میکنم و یک ای دی بر هر کدوم میدم
import defaultLayout from "./components/layouts/defaultLayout";
import adminLayout from "./components/AdminLayout/sidebar"
Vue.component('default-layout',defaultLayout);
Vue.component('admin-layout',adminLayout);
و در app.vue یک شرط قرار بدیم که اگه متا دیتایی وارد نشد defaultLayout به صورت پیشفرض انتخاب بشه
const defaultLayout = 'default'
export default {
computed: {
layout() {
return (this.$route.meta.layout || defaultLayout) + '-layout';
}
},
و زمانی که ما یک metadata در router vue ثبت کنیم میتونیم مشخص کنیم کدوم layout انتخاب بشه
{
meta: { layout: 'admin-layout' },
path: 'my-posts',
name: 'MyPosts',
component: () => import('@/views/Dashboard/MyPosts.vue'),
},من حقیقتش چند کامپوننت تست نکردم ولی ما میتونیم کامپوننت ها را به عنوان یک لیست به metadata بدیدم و در قسمت app.vue اون ها رو پیمایش کنیم .