vue父子组件通信使用方法-js教程-PHP中文网

首页

web前端

js教程

vue父子组件通信使用方法

php中世界最好的语言

Apr 14, 2018 pm 05:03 PM

使用方法组件沟通

这次给大家带来vue父子组件通信使用方法，使用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>假的聊天室</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('chat-room',{
  methods:{
   recvMsg:function(msg){
    console.log("在父组件中接收子组件传来的数据"+msg);
    this.chatList.push(msg);
   }
  },
 data: function () {
  return {
  chatList:[]
  }
 },
 template:`
  <p>
    <h1>假的聊天室</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('user-component',{
 props:['userName'],
 data: function () {
  return {
  userInput:''
  }
 },
 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: '#container',
  data: {
  msg: 'Hello Vue'
  }
 })
</script>
</body>
</html>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7467

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

DirectX修复工具怎么用？DirectX修复工具详细使用方法 Mar 15, 2024 am 08:31 AM

　　DirectX修复工具是专业的系统工具，主要功能是检测当前系统的DirectX状态，如果发现异常就可以直接修复。可能还有很多用户不清楚DirectX修复工具怎么用吧，下面就来看看详细教程。　　1、使用修复工具软件进行修复检测。　　2、如果修复完成后提示C++组件存在异常的问题，请点击取消按钮，然后点击工具菜单栏。　　3、点击选项按钮，选择扩展，点击开始扩展按钮。　　4、扩展完成后再重新进行检测修复即可。　　5、如果修复工具操作完成后仍未解决问题，可以尝试卸载重新安装报错的程序。

新一代光纤宽带技术 ——50G PON Apr 20, 2024 pm 09:22 PM

上篇文章（链接），小枣君给大家介绍了宽带技术从ISDN、xDSL到10GPON的发展历程。今天，我们来聊聊即将到来的新一代光纤宽带技术——50GPON。█F5G和F5G-A介绍50GPON之前，先说说F5G和F5G-A。2020年2月，ETSI（欧洲电信标准化协会）推进了一套以10GPON+FTTR、Wi-Fi6、200G光传送/汇聚、OXC等技术为基础的固定通信网络技术体系，并将其命名为F5G，也就是第五代固网通信技术（The5thgenerationFixednetworks）。F5G是固网

HTTP 525状态码介绍：探究其定义和应用 Feb 18, 2024 pm 10:12 PM

HTTP525状态码简介：了解其定义和使用方法HTTP（HypertextTransferProtocol）525状态码是指服务器在SSL握手过程中发生错误，导致无法建立安全连接。在传输层安全性（TLS）握手期间发生错误时，服务器将返回此状态码。该状态码属于服务器错误类别，通常表示服务器配置或设置问题。当客户端尝试通过HTTPS连接到服务器时，服务器无

百度网盘怎么用-百度网盘的使用方法 Mar 04, 2024 pm 09:28 PM

有很多朋友还不知道百度网盘怎么用，所以下面小编就讲解了百度网盘的使用方法，有需要的小伙伴赶紧来看一下吧，相信对大家一定会有所帮助哦。第一步：安装好百度网盘后直接登录(如图所示);第二步：然后可根据页面提示选择“我的分享”和“传输列表”(如图所示);第三步：在“好友分享”里可以把图片和文件直接分享给好友(如图所示);第四步：接着选择“分享”后可勾选电脑文件或者网盘文件(如图所示);第五步：然后就可以寻找好友(如图所示);第六步：还可以在“功能宝箱”中寻找自己需要的功能(如图所示)。上面就是小编为大

快速学会复制和粘贴操作 Feb 18, 2024 pm 03:25 PM

复制粘贴快捷键使用方法复制粘贴是我们在日常使用电脑时经常会遇到的操作。为了提高工作效率，熟练掌握复制粘贴快捷键是非常重要的。本文将介绍一些常用的复制粘贴快捷键使用方法，帮助读者更加方便地进行复制粘贴操作。复制快捷键：Ctrl+CCtrl+C是复制的快捷键，通过按住Ctrl键然后再按C键，即可将选中的文字、文件、图片等内容复制到剪贴板。要使用该快捷键，

KMS激活工具是什么？KMS激活工具怎么用？KMS激活工具使用方法？ Mar 18, 2024 am 11:07 AM

KMS激活工具是一种用于激活微软Windows和Office产品的软件工具。KMS是KeyManagementService的缩写，即密钥管理服务。KMS激活工具通过模拟KMS服务器的功能，使得计算机可以连接到这个虚拟的KMS服务器，从而实现对Windows和Office产品的激活。KMS激活工具体积小巧，功能强大，可以一键永久激活，无需联网状态就可以激活任何版本的window系统和任何版本的Office软件，是目前最成功的且经常更新的Windows激活工具，今天小编就给大家介绍一下kms激活工

如何使用快捷键合并单元格 Feb 26, 2024 am 10:27 AM

合并单元格的快捷键怎么用在日常工作中，我们经常需要对表格进行编辑和排版。而合并单元格是一种常见的操作，可以将相邻的多个单元格合并为一个单元格，以提高表格的美观程度和信息展示效果。在MicrosoftExcel和GoogleSheets等主流的电子表格软件中，合并单元格的操作非常简便，可以通过快捷键来实现。下面将介绍在这两个软件中合并单元格的快捷键用法。在