Vue is atributi

<template>
  <h1>Dynamic Components</h1>
  <p>App.vue switches between which component to show.</p>
  <button @click="toggleValue = !toggleValue">Switch component</button>
  <component :is="activeComp"></component>
</template>

Quyida ko‘proq misollarni ko‘ring.

Ta’rif va qo‘llanilishi

is atributi uchta narsa uchun ishlatilishi mumkin:

1. Dinamik komponentlar: is atributi dinamik komponent yaratish uchun o‘rnatilgan <component> elementiga beriladi, bunda is atributi qaysi komponent faol bo‘lishini belgilaydi.

Batafsilroq aytganda, is atributi v-bind yordamida xususiyatga bog‘lanadi va bu xususiyat faol bo‘lishi kerak bo‘lgan komponent nomini saqlaydi. (Yuqoridagi misolga qarang)

2. Native elementni Vue komponenti bilan almashtirish: is="vue:my-component" native HTML elementini Vue komponenti bilan almashtirish uchun shu elementga qo‘yiladi. (1-misolga qarang)

Agar vue: prefiksidan foydalanmasak, u quyida tushuntirilganidek moslashtirilgan o‘rnatilgan element (customized built-in element) sifatida talqin qilinadi va Vue komponenti joylashtirilmaydi.

3. Moslashtirilgan o‘rnatilgan element: Moslashtirilgan o‘rnatilgan elementlarni JavaScript’da yozish mumkin, is atributi esa HTML tegini shunday moslashtirilgan o‘rnatilgan element sifatida belgilash uchun ishlatilishi mumkin. Bu Vue imkoniyati emas.

Ko‘proq misollar

<template>
  <h2>Example Built-in 'is' Attribute</h2>
  <p>The IMG tag below is set to be replaced by a component by the use of 'is="vue:child-comp"'.</p>
  <img is="vue:child-comp" />
</template>

<template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>This is the child component</p>
  </div>
</template>

<style scoped>
div {
  border: solid black 1px;
  background-color: lightgreen;
  padding: 10px;
  max-width: 250px;
  margin-top: 20px;
}
</style>

Tegishli sahifalar

Vue darsligi: Dinamik komponentlar

Vue darsligi: Vue komponentlari

Vue darsligi: Vue hisoblangan (computed) xususiyatlar

Vue darsligi: Vue v-bind direktivasi

Vue ma’lumotnomasi: Vue v-bind direktivasi

Vue ma’lumotnomasi: Vue element elementi

Vue ma’lumotnomasi: Vue $refs obyekti