vue組件父子間通訊實作聊天室實例詳解-js教程-PHP中文網

首頁

web前端

js教程

vue組件父子間通訊實作聊天室實例詳解

小云云

Jan 19, 2018 pm 01:50 PM

實現聊天室溝通

本文主要為大家詳細介紹了vue組件父子間通信之綜合練習聊天室製作，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>组件父子间通信之综合练习</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
  <p>{{msg}}</p>
  <chat-room></chat-room>
 </p>
 <script>

// 创建父组件
  Vue.component("chat-room",{
  //data属性中的chatList保存用户聊天信息
   data:function(){
    return{
     chatList:[]
    }
   },
   template:`
    <p>
     //假的聊天室
     <h1 id="假的聊天室">假的聊天室</h1>
     <user-component userName="Rose"></user-component>
     <user-component userName="Jack"></user-component>
     //显示用户的聊天信息
     <ul>
      <li v-for="tmp in chatList">{{tmp}}</li>
     </ul>
    </p>
   `
  })
 //创建子组件 
  Vue.component("user-component",{
   props:["userName"],
   //通过v-model把用户输入的数据保存到userInput数组
   data:function(){
    return {
     userInput:[]
    }
   },
   methods:{
    //把用户输入的数据以及用户名label信息push给chatList数组
    sendChat:function(){
     this.$parent.chatList.push(this.userName+":"+this.userInput);
     //情况input框
     this.userInput =" ";
    }
   },
   template:`
    <p>
     <label>{{userName}}</label>
     <input type="text" v-model="userInput"/>
     <button @click="sendChat">发送</button>
    </p>
   `
  })
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs"
   }
  })
 </script>
 </body>
</html>

元件間通訊綜合練習：
（props down,events up）
有2個元件：chat-room,user-component
user-component是由label input button構成
chat-room是由兩個user-component和一個列表構成

①在chat-room呼叫user-component指定label的名字
②在user-component，
點選按鈕時，將目前使用者輸入的資訊傳送給chat-room元件，chat-room接收到資料顯示在清單中

代碼：

# ####

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <script src="js/vue.js"></script>
 <title></title>
</head>
<body>

<p id="container">
 <chat-room></chat-room>
</p>

<script>
 Vue.component(&#39;chat-room&#39;,{
  methods:{
   recvMsg:function(msg){
    console.log("在父组件中接收子组件传来的数据"+msg);
    this.chatList.push(msg);
   }
  },
 data: function () {
  return {
  chatList:[]
  }
 },
 template:`
  <p>
    <h1 id="假的聊天室">假的聊天室</h1>
  <ul>
   <li v-for="tmp in chatList">
   {{tmp}}
   </li>
  </ul>
  <user-component userName="Lucy" @sendToFather="recvMsg"></user-component>
  <user-component userName="Merry" @sendToFather="recvMsg"></user-component>
  </p>
  `
 })

 Vue.component(&#39;user-component&#39;,{
 props:[&#39;userName&#39;],
 data: function () {
  return {
  userInput:&#39;&#39;
  }
 },
 methods:{
  sendToFather: function () {
  //触发toFatherEvent的事件，把input中
  //用户输入的数据发送
  this.$emit("sendToFather",this.userName+":"+this.userInput);
  }
 },
 template:`
  <p>
  <label>{{userName}}</label>
  <input type="text" v-model="userInput"/>
  <button @click="sendToFather">发送</button>
  </p>
  `
 })
 new Vue({
 el: &#39;#container&#39;,
  data: {
  msg: &#39;Hello Vue&#39;
  }
 })
</script>

</body>
</html>

###相關推薦：########swoole與websocket簡單聊天室實作方法############PHP怎麼開發聊天室###### #######html5新技術socket.io實作聊天室的方法######

以上是vue組件父子間通訊實作聊天室實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何使用MySQL和Java实现一个简单的聊天室功能Sep 21, 2023 pm 05:13 PM

如何使用MySQL和Java实现一个简单的聊天室功能引言：在当今社交媒体的盛行下，人们越来越依赖于在线聊天来交流和分享信息。如何使用MySQL和Java实现一个简单的聊天室功能是一个非常有趣和实用的项目。本文将介绍如何使用MySQL和Java来实现这一功能，并提供具体的代码示例。一、搭建数据库首先，我们需要在MySQL中创建一个数据库来存储聊天室的相关信息。

如何在PHP中实现SEO优化May 20, 2023 pm 01:30 PM

随着互联网的发展，SEO（SearchEngineOptimization，搜索引擎优化）已经成为了网站优化的重要一环。如果您想要使您的PHP网站在搜索引擎中获得更高的排名，就需要对SEO的内容有一定的了解了。本文将会介绍如何在PHP中实现SEO优化，内容包括网站结构优化、网页内容优化、外部链接优化，以及其他相关的优化技巧。一、网站结构优化网站结构对于S

如何使用Go语言开发Websocket聊天室Dec 14, 2023 pm 01:46 PM

如何使用Go语言开发Websocket聊天室Websocket是一种实时通信协议，通过建立一次连接，可以在服务器和客户端之间进行双向通信。在开发聊天室时，Websocket是一个非常好的选择，因为它可以实现实时消息交流，并且能够提供高效的性能。本文将介绍如何使用Go语言开发一个简单的Websocket聊天室，并提供一些具体的代码示例。一、准备工作1.安装Go

如何在PHP中实现ERP系统May 20, 2023 pm 06:21 PM

随着电子商务和企业管理的发展，许多企业开始寻找更好的方法来处理其日常业务流程。ERP系统是一种能够整合企业各种业务流程的软件工具。它提供了全面的功能，包括生产、销售、采购、库存、财务等方面，帮助企业提高效率、控制成本和提高客户满意度。而在PHP编程语言中，也能够实现ERP系统，这就需要我们掌握一些基本的知识和技术。下面，我们将深入探讨如何在PHP中实现ERP

基于JavaScript构建实时聊天室Aug 10, 2023 pm 11:18 PM

基于JavaScript构建实时聊天室随着互联网的快速发展，人们越来越注重即时通讯和实时互动体验。而实时聊天室作为一种常见的即时通讯工具，对于个人和企业来说都非常重要。本文将介绍如何使用JavaScript构建一个简单的实时聊天室，并提供相应的代码示例。我们首先需要一个前端页面作为聊天室的UI界面。以下是一个简单的HTML结构示例：<!DOCTYPE

ThinkPHP6聊天室开发指南：实现实时通讯功能Aug 12, 2023 pm 02:31 PM

ThinkPHP6聊天室开发指南：实现实时通讯功能引言：随着互联网的快速发展，实时通讯的需求也越来越大。聊天室作为一种常见的实时通讯方式，受到了广泛的关注和使用。本文将通过使用ThinkPHP6框架，为大家提供一种简单、快速实现实时通讯功能的方法。一、环境配置：在开始之前，我们需要配置好开发环境。确保你已经安装了PHP和ThinkPHP6框架。同时，本文将使

如何在PHP中实现CRM系统May 20, 2023 pm 12:31 PM

随着企业的发展，客户管理变得越来越重要。为了提高客户满意度和忠诚度，越来越多的企业采用客户关系管理系统（CRM）来帮助其管理客户关系。而PHP是一种流行的编程语言，因其简单易学、灵活和强大而被广泛应用于Web开发。那么，如何在PHP中实现CRM系统呢？本文将为您介绍实现CRM系统的步骤和技巧。Step1：需求分析在开始开发CRM系统之前，您需要进行需求分析

在PHP中如何实现物联网开发？May 12, 2023 am 11:51 AM

随着物联网技术的发展和普及，越来越多的应用场景需要使用PHP语言进行物联网开发。PHP作为一种广泛应用于Web开发的脚本语言，它的易学易用、开发速度快、可扩展性强等特点，使其成为开发物联网应用的一种优秀选择。本文将介绍在PHP中实现物联网开发的常用技术和方法。一、传输协议和数据格式物联网设备通常使用TCP/IP或UDP协议进行数据传输，而HTTP协议是一个优

See all articles