如何在不同模板之间传递数据

Question

我正在尝试聊天，我不知道如何单击一个模板中的一个项目，获取数据并将其传输到另一个模板。从#模板1到#模板2

const app = new Vue({
    el: '#content',
    data:{
      users: [],
      messages: []
    }
});

template1

<template lang="html">
<li v-on:click="getMessages()">
  <div class="content-container">
    <span class="name">{{ user.first_name}} {{user.last_name}}</span>
    <span class="txt"></span>
  </div>
</li>
</template>


<script>
export default {
props: ['user'],
data: function() {
    return {
      messages: []
    };
  },


methods: {
getMessages(id) {
    this.$http.get('/admin/chat/messages').then(function(res){
        this.messages = res.data;
    }
    },
}
}
</script>

template2

<template lang="html">
<ul class="chat">
  <chat-message v-for="message in messages" :key="+message" :message="message"></chat-message>
</ul>
</template>


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

如何在此模板之间传递数据

结构如下：

el: #content
<div id="content">

    <div class="list-text" id="chatbox">
      <user-list :users="users">#template1</user-list>
    </div>

    <div class="list-chat">
      <chat-log :messages="messages">#template2</chat-log>
      <chat-composer v-on:messagesent="addMessage"></chat-composer>
    </div>

</div>

当我单击用户列表中的用户时，我试图加载来自该用户的消息，并且不知道如何在聊天日志中传递这些消息。

Answer 1

有几种方法可以实现组件之间的通信。

1. 发出并侦听事件(如果组件是兄弟级，则必须经过父级)--如果您有很少的组件需要相互通信，这个解决方案是可以的。
2. 使用事件总线->每个事件都会通过这条总线(关于如何创建事件总线的好教程 )
3. 使用vuex状态管理(就像事件总线，但如果您有大量的组件通信，则更好)