Как извлечь значение из props и передать его в Vue?

Question

[Шамуэй]

Как извлечь значение из props: ['id ] (число) и передать его в const app = new Vue({})?

//component
<template><--html tags --></template>

<script>
  export default {
    props: ['messages','id']
  };
</script>

<-- Laravel view -->
<div class="panel-body">
        <chat-messages :messages="messages"
           :id="{{ $room->id }}"></chat-messages>
</div>

//app.js
require('./bootstrap');

Vue.component('chat-messages', require('./components/ChatMessages.vue'));
Vue.component('chat-form', require('./components/ChatForm.vue'));

const app = new Vue({
    el: '#app',
    data: {
        messages: [],
       // можно как то так id:this.props['id'] ???
      
    },

    created() {

      console.log(this.id+'slave')
        this.fetchMessages(); // нужно id сделать параметром это метода
        Echo.private('chat')
  .listen('MessageSent', (e) => {
    this.messages.push({
      message: e.message.message, // maybe need add room id I NOT KNOW maybe here is error
      user: e.user,
      room: e.room
    });
  });
  console.log(this.messages)
    },

    methods: {
        fetchMessages(id) {
            axios.get('/messages/:id').then(response => {
                this.messages = response.data;
                console.log(this.id+'here')
            });
        },

        addMessage(message) {
            this.messages.push(message);

            axios.post('/messages', message).then(response => {
              console.log(response.data);
            });
        }
    }
});

Answer 1

[Yeldos Adetbekov]

Компоненты довольно закрытые штуки. Дать им что-то можно через props, а получить через емит:
https://vuejs.org/v2/api/#vm-emit

Comments

[Шамуэй]

Хорошо, а есть иной способ из template получить данные в Vue?

[Yeldos Adetbekov]

Хомон: К сожалению, или может, к счастью, но можно через листенеры. На самом деле emit и on и есть листенеры(Dispatch,addEventL), все это всего лишь синтаксический сахар)

[Yeldos Adetbekov]

Точно не знаю, но возможно vuex решит эту проблему. Сам недавно начал во вью копаться. Как я знаю vuex это некий общий стейт. И с любого места можно без проблем достать данные. И он очень структурирован. Как то так))
Поправьте если ошибаюсь)

[wostex]

Yeldos Adetbekov: все верно. Только если один раз нужно передать данные родителю - быстрее и проще будет использовать emit, как вы и писали. Если это нужно часто - vuex.

[Yeldos Adetbekov]

wostex: Спасибо за ответ)