إظهار مكون Vue ديناميكيًا

باستخدام Vue ، يمكنك تحديد تخطيط التطبيق باستخدام المكونات. في البداية ، تضع المكونات يدويًا في المكان الذي تريده ، ولكن في مرحلة ما تحتاج إلى طريقة أكثر مرونة لإظهار المكونات أو إخفائها بناءً على حالة التطبيق

باستخدام التوجيهات الشرطية

أبسط خيار هو استخدامv-ifوv-elseالتوجيهات.

هنا مثال. الv-ifالتوجيه يتحقق منnoTodosالخاصية المحسوبة ، والتي ترجع خطأ إذا كانت ملكية الدولةtodosيحتوي على عنصر واحد على الأقل:

<template>
  <main>
    <AddFirstTodo v-if="noTodos" />
    <div v-else>
      <AddTodo />
      <Todos :todos=todos />
    </div>
  </main>
</template>

<script> export default { data() { return { todos: [], } }, computed: { noTodos() { return this.todos.length === 0 } } } </script>

يتيح ذلك حل احتياجات العديد من التطبيقات دون الوصول إلى إعدادات أكثر تعقيدًا. يمكن أن تتداخل الشروط أيضًا على النحو التالي:

<template>
  <main>
    <Component1 v-if="shouldShowComponent1" />
    <div v-else>
      <Component2 v-if="shouldShowComponent2" />
      <div v-else>
        <Component3 />
      </div>
    </div>
  </main>
</template>

باستخدامcomponentمكون وis

بدلا من خلقv-ifوv-elseالهياكل ، يمكنك بناء القالب الخاص بك بحيث يكون هناك عنصر نائب يتم تعيين مكون ديناميكيًا له.

هذا ما الcomponentالمكون ، بمساعدةv-bind:isالتوجيه.

<component v-bind:is="componentName"></component>

componentNameهي خاصية للدولة تحدد اسم المكون الذي نريد عرضه. يمكن أن تكون جزءًا من الدولة ، أو خاصية محسوبة:

<script>
export default {
  data() {
    return {
      componentName: 'aComponent',
    }
  }
}
</script>

تحميل مجانيكتيب Vue


المزيد من دروس vue: