Как использовать однофайловый компонент много раз?

Question

[Enfiladed]

Здравствуйте! В общем, у меня идея такая: есть компонент Message с версткой и функциями одного сообщения, то есть одного конкретного сообщения внутри чата, и когда возникает определенное событие, в Message передается время и текст с сервера, и он добавляется в другом компоненте родителе.

Пробовал вот так, но не вышло:

import chatMessage from "./chat-message.vue"
...
mounted: function() {
 let thisComponents = this
 socket.on("message", data) {
   thisComponents.$el.appendChild("<chat-message messageText="data.messageText", messageTime="data.messageTime"></chat-message>")
  }
}, 
components: {
         chatMessage
}

chatMessage:

<template>
   <div class="chat-message">
      {{messageText}} <br>
      {{messageTime}}
   </div>
</template>

<script>
   export default {
      name: "chat-message",
      props: ["messageText", "messageTime"]
   }
</script>

Было еще пару идей, но суть в том, что что-то получается неудобно, или просто не работает. Есть идеи, как можно такое реализовать, или стоит придумать какую-то другую структуру? Заранее спасибо)

Comments

[Miki06]

А что конкретно не работает в вашем примере?

[Enfiladed]

Говорит, функция appendChild должна принимать "node", а передан не node

Answer 1

[Vitaliy]

<chat-message ...> должен быть прописан в шаблоне текущего компонента с v-for директивой, а по событию нужно добавлять данные в массив в состоянии. Прямая работа с DOM не приветствуется, тем более здесь она вообще не в тему. Смотрите документацию по Vue.js

Comments

[Mr. Grump]

Lisey думаю стоит отметить как верный ответ

Все что вам нужно это хранить стостояния в data, vue сам позаботиться об отрисовке. Видоизмени код вот так:

<template>
...
  <chat-message v-for="message in messages" messageText="message.text" messageTime="message.time">
...
</template>

<script>
import chatMessage from "./chat-message.vue"

export default {
  components: {
    chatMessage
  },
  data() {
    return {
      messages: []
    }
  },
  methods: {
    newMessage(data) {
      this.messages.push({
        time: data.messageTime,
        text: data.messageText
      })
    }
  },
  mounted() {
    socket.on("message", this.newMessage)
  },
  beforeDestroy() {
    // Не забываем отписываться от подписок
    socket.off("message", this.newMessage)
  }
}
</script>

И меньше конкретики, вполне логично что у chatMessage есть messageTime, можно просто упустить и назвать time так как имеется своя область замыкания и название переменной/пропса не будет конфликтовать, так же посоветую ознакомиться с синтаксом es6

[Enfiladed]

Я думал про это, но разве не будет большой нагрузки, если я буду перерисовывать все сообщения при добавлении нового? Единственное, что пугает

[Enfiladed]

Mr. Grump, Спасибо вам огромное

[Mr. Grump]

Lisey, нет, все сообщения перерисовываться не будут, в браузере все DOM элементы это объекты ( https://developer.mozilla.org/ru/docs/Web/API/Element ), и vue этим пользуется. Тут еще нужно понимание как работает браузер. Работа с DOM элементами в javascript не имеет ничего общего с рендерингом HTML разметки так как если бы мы это делали на бекенде (PHP, Ruby, Python - что вам ближе). Для того чтоб создать какой-то элемент (кнопку, блок, форму и т.д.) не обязательно она должна существовать в разметке и быть отрисована. Самый простой и хороший пример для понимания объектов в браузере это сделать селект какого-то элемента

const el = document.querySelector('.my_button') ..или.. var el = $('.my_button')

и попробовать закинуть этот элемент в какой-то другой блок (пусть даже в конец body)

document.body.appendChild(el) ..или.. $('body').append($(el))

то вы увидите что что элемент будет перенесен, а не скопирован, так как мы работаем не с разметкой а объектами в памяти.

[Enfiladed]

Mr. Grump, это было потрясающе, от души, еще раз спасибо)

Answer 2

[VegasChickiChicki]

Я не такой эксперт во Vue, но тут вообще что-то явно не так, смысл Vue - работа с данными, а не с DOM. Вам нужно показывать ваше сообщение(компонент) по условию, а вы просто рисуете его в DOM. Его нужно вставлять как компонент в ваш шаблон и уже в него передавать данные, а данные обновлять с вашего сокета(с этим не работал, тут не помогу).