详解vue组件父子间通信
本文主要为大家详细介绍了vue组件父子间通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
三、组件间通信（$parent $refs）
父组件要想获取子组件的数据：
①在调用子组件的时候，指定ref属性
②根据指定的引用的名字 找到子组件的实例对象
this.$refs.mySon
子组件要想获取父组件的数据：
①直接读取
this.$parent
通过this.$refs拿到子组件的数据
代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>组件间通信-01</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<dahua></dahua>
</p>
<script>
//vue提供的ref
Vue.component("dahua",{
data:function(){
return{
mySonName:""
}
},
methods:{
//通过$refs拿到指定的所引用的对应的组件的实例对象
getSonName:function(){
this.mySonName = this.$refs.mySon.name;
}
},
template:`
<p>
<h1>这是父组件</h1>
<button @click = "getSonName">获取子组件数据</button>
<span>{{mySonName}}</span>
<hr>
<xiaohua ref="mySon"></xiaohua>
</p>
`
})
// 创建子组件
Vue.component("xiaohua",{
data:function(){
return{
name:"小花"
}
},
template:`
<h1>这是子组件</h1>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>子组件通过$parent获取父组件的数据
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>组件间通信-02</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<dahua></dahua>
</p>
<script>
//创建子组件
Vue.component("dahua",{
data:function(){
return{
myName:"大花"
}
},
template:`
<p>
<h1>这是父组件</h1>
<hr>
<xiaohua></xiaohua>
</p>
`
})
//创建子组件
Vue.component("xiaohua",{
data:function(){
return{
msg:""
}
},
template:`
<p>
<h1>这是子组件</h1>
<p>{{msg}}</p>
</p>
`,
created:function(){
//在子组件创建完成时获取父组件的数据
//保存在msg中在p标签中显示
this.msg = this.$parent.myName;
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>相关推荐：
以上是详解vue组件父子间通信的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
新一代光纤宽带技术 ——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是固网
如何安装Win10旧版本组件DirectPlay
Dec 28, 2023 pm 03:43 PM
不少用户在玩win10的的一些游戏的时候总是会遇到一些问题，比如说卡屏和花屏等等情况，这个时候我们是可以采用打开directplay这个功能来解决的，而且功能的操作方法也很简单。win10旧版组件directplay怎么安装1、在搜索框里面输入“控制面板”然后打开2、查看方式选择大图标3、找到“程序和功能”4、点击左侧的启用或关闭win功能5、选择旧版这里的勾选上就可以了
如何通过PHP与P2P协议实现点对点通信
Jul 28, 2023 pm 10:13 PM
如何通过PHP与P2P协议实现点对点通信随着互联网的发展，点对点（peer-to-peer，简称P2P）通信逐渐成为一种重要的通信方式。与传统的客户端-服务器通信方式相比，P2P通信具有更好的稳定性和伸缩性。在本文中，我们将介绍如何使用PHP与P2P协议实现点对点通信，并提供相应的代码示例。首先，我们需要了解P2P通信的基本原理。P2P协议允许多台计算机直接
Vue与服务器端通信的刨析：如何处理断网情况
Aug 10, 2023 am 10:55 AM
Vue与服务器端通信的探析：处理断网情况的策略引言：在现代Web开发中，Vue.js已成为一种广泛使用的前端框架。然而，由于网络环境的不稳定性，处理断网情况是一个需要我们考虑的重要问题。本文将分析如何在Vue中处理断网情况，并给出相应的代码示例。一、断网情况分析在网络状况较好的情况下，Vue可以通过Ajax请求或WebSocket与服务器进行通信。但是，
宽带上网技术简史
Apr 16, 2024 am 09:00 AM
在如今这个数字时代，宽带已经成为我们每个人、每个家庭的生活必需品。如果没有它，我们会坐立难安、心绪不宁。那么，你知道宽带背后的技术原理吗？从最早期的56k“猫”拨号，到现在的千兆城市、千兆家庭，我们的宽带技术到底经历了怎样的变革？今天这篇文章，我们就来详细了解一下——“宽带的故事”。█xDSL和ISDN下面这个界面，你见过吗？我相信很多70后80后的小伙伴，肯定见过，并且非常熟悉。没错，这就是当年我们最初接触互联网时，进行“拨号上网”的界面。那还是20多年前，小枣君还在上大学的时候。为了上网，我
如何打开win10旧版组件的设置
Dec 22, 2023 am 08:45 AM
win10旧版组件是需要用户自己去设置里面打开的，因为很多的组件平时都是默认关闭的状态，首先我们需要进入到设置里面，操作很简单，跟着下面的步骤来就可以了win10旧版组件在哪里打开1、点击开始，然后点击“win系统”2、点击进入控制面板3、再点击下面的程序4、点击“启用或关闭win功能”5、在这里就可以选择你要的打开了
无线鼠标的发展史
Jun 12, 2024 pm 08:52 PM
原文标题：《无线鼠标到底是怎么做到无线的？》无线鼠标慢慢成了现在办公电脑的标配，从此再也不用拖着长长的线跑来跑去了。可是，无线鼠标是怎么工作的呢？今天我们一起来学习一下No.1无线鼠标的发展史你知道吗，无线鼠标现在也已经40岁了，1984年的时候，罗技研制了世界上第一款无线鼠标，不过这个无线鼠标采用红外线作为信号的载体，据说长得像下面图片这个样子，后面由于性能原因而宣告失败。直到十年后的1994年，罗技终于研发成功了一个工作在27MHz的无线鼠标，这个27MHz频率也成了很长一段时间内，无线鼠标
PHP实现Socket通信的方法与技巧
Mar 07, 2024 pm 02:06 PM
PHP是一种常用的开发语言，可以用于开发各种Web应用程序。除了常见的HTTP请求和响应以外，PHP也支持通过Socket进行网络通信，实现更为灵活和高效的数据交互。本文将介绍PHP如何实现Socket通信的方法与技巧，并附上具体的代码示例。什么是Socket通信Socket是一种在网络中进行通信的方法，可以在不同的计算机之间传输数据。通过S
