如何在不同模板之間傳遞數據

我正在嘗試進行聊天，並且我不知道如何單擊一個模板中的項目獲取數據並將其傳輸到另一個模板。從＃模板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>

模板2

<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>

當我點擊在用戶列表中的用戶我試圖從該用戶加載消息，我不知道如何將它們傳遞聊天日誌

來源

2017-07-30 Alexeymsa

這取決於他們的關係是兄弟姐妹，親子還是不直接接觸？ –

他們是兄弟姐妹 – Alexeymsa

有幾種方法來實現組件

的Emit之間的溝通，並聽取事件（如果組件是兄弟姐妹，你將不得不通過父） - 該解決方案是好的，如果您有需要，每個溝通很少組件其他
使用事件總線 - >每個事件無線LL通過這個巴士（好tutorial關於如何創建一個事件總線）
使用vuex - 狀態管理（就像事件總線，但更好的，如果你有很多組件通信的）

來源

2017-07-31 04:47:54

謝謝！差不多了。使用事件總線。我在＃template2中接收消息並將它們輸出到控制檯，但它們不顯示在聊天中。試圖去做 – Alexeymsa

如何在不同模板之間傳遞數據

回答

相關問題