Динамические компоненты/классы Vue.js для тех, кто спешит

Объяснение динамических компонентов и динамических классов с примерами.

Vue.js, как и другие веб-фреймворки, необходимо использовать в полной мере, а это невозможно без использования его динамических функций!

Динамические компоненты

Компоненты можно повторно использовать в экземплярах Vue.js, и в большинстве случаев компоненты бесполезны, если вы не можете передать им данные.

Динамические функции дополнительно позволяют пользователям переключаться между двумя или более компонентами без маршрутизации.

Динамические классы

Идея остается той же, что и для динамических компонентов, поэтому в этой статье мы подумали о том, чтобы поразить двух зайцев одним выстрелом. Общей потребностью является манипулирование внешним видом данного элемента с помощью классов или стилей CSS с привязкой атрибутов.

Давайте начнем, мы! 🤓

Я буду использовать примеры из моего проекта (все еще находящегося в разработке), в котором используются как динамические компоненты, так и динамические классы. Репо проекта вы можете найти здесь.

Мы начнем с динамических компонентов и перейдем к динамическим классам.

<script>
import EnterRoom from '@/components/EnterRoom.vue'
import ChatRoom from '@/components/ChatRoom.vue'

export default ({
name:'App',

components: {
'Main Room': EnterRoom,
'Chat Room': ChatRoom,
},

data () {
return {
currentComponent: 'Main Room',
username: '',
   }
},

☝ ️Импортируйте оба компонента и объявите переменную, соответствующую текущему компоненту.

👇🏻 Произойдет выделение комнаты, что позволит динамически менять текущий компонент.

methods: {
updateRoom(room) {
this.currentComponent = room
if (this.currentComponent === 'Main Room') {
this.$router.push('/')
}
if (this.currentComponent === 'Chat Room') {
this.$router.push('/chat-room')
}
},
addUser(user) {
this.username = user
}
}
})

Теперь давайте добавим наш элемент компонента в наш шаблон.

<div id="app"> 
   
<component v-bind:is="currentComponent" v-on:child-room="updateRoom($event)" v-on:user-to-room="addUser($event)"  :user="username">
</component> 
 
</div>

Директива V-bind привязывает свойство компонента атрибута к элементу, при этом соответствующий компонент будет динамически изменяться. Директива v-on получает данные от одного из компонентов для обновления выбранной комнаты с помощью события emit.

Событие emit не будет здесь освещаться, оно было кратко описано в моем другом посте, который вы можете найти ниже.

Классы и привязки стилей

<li class=”clearfix2"> 
    <div v-for=”(msg, index) in messages” :key=”index”> 
    <div class=”w-full flex “ v-bind:class=”{‘justify-end’:     User(msg.user)}”> 
    <div class=”bg-gray-100 rounded px-5 py-2 my-2 text-gray-700 relative” style=”max-width: 300px;”> 
    <span class=”block text-blue-400">{{ msg.user }}</span> 
    <span class=”block”>{{ msg.message }}</span> 
    <span class=”block text-xs text-right”>{{msg.timestamp}}</span>     </div> 
</div> 
</div> 
</li>
....
methods: {
User(User) {            
    if (this.user === User) {                
    return true            
      }        
   }    
},

К сведению, я использую TailwindCSS. И, как вы можете заметить, в третьей строке директива v-bind повторяется еще раз с той лишь разницей, что : classдобавляется.

justify-end — это класс, который будет добавлен, ЕСЛИ условие выполняется, в этом случае он запускает метод, чтобы проверить, являетесь ли вы пользователем, отправляющим сообщение.

В завершение вы можете делать намного больше динамических действий с компонентами и классами/стилями. Я надеялся, что эта статья помогла, и если у вас есть какие-либо вопросы, не стесняйтесь задавать их, поскольку мы все вместе находимся в этом учебном путешествии. ❤

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.