vue父子组件通信方式,vue.js父子组件间通信
本文主要介绍如何使用Vue实现父子组件之间的通信。对Vue感兴趣的同学可以参考一下。
目录
一、父子成分关系的构成二。道具三。$emit IV。$母公司诉摘要
一、父子组件的关系构成
本文将总结Vue中父子组件之间的通信方式。
vue中父子组件的关系是如何形成的，或者说哪个组件可以称为父组件，哪个组件可以称为子组件？
在我的理解中，父子组件的关系也比较简单。
在用vue-cli工具构建的项目中，我们经常注册一个组件来引用另一个组件。
Home.vue
模板
div class=home
p这是家用部件/p
/div
/模板
脚本
导出默认值{
名称：“家”
}
/脚本
样式范围。主页{
边框：1px纯色# 4488ff
显示：内嵌-块；
填充：10px
}
/风格
App.vue
模板
div id=应用程序
p以下是应用组件/p
！- stpe3:使用-
家/家
/div
/模板
脚本
//第一步：简介
从导入主页。/组件/主页
导出默认值{
名称：“应用程序”，
//第二步：注册
组件：{ Home }
}
/脚本
风格
#app {
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
颜色：# 2c3e50
显示：内嵌-块；
边框：1px纯色橙色；
填充：10px
}
/风格
在上面两个组件中，我们在App组件中引入、注册和使用了Home组件。
在vue中，我们可以调用App组件作为父组件，Home组件作为子组件，这两个组件构成了父子关系。
这里一定要注意，入门、注册、使用三个步骤缺一不可。
否则两个组件无法形成父子关系，无法使用后面总结的几种通信方式相互通信。
在了解了vue中亲子组件的组成之后，我就来介绍一下之前亲子组件是如何相互通信的。
二、props
vue中父子组件之间的第一种通信方式是通过props属性，父组件与子组件通信。
我们来练习一下。
首先，找到父组件中使用子组件的地方，将父组件需要传递的数据添加到子组件中。
App.vue(省略一些未修改的代码)
模板
div id=应用程序
p以下是应用组件/p
家
Title=的父组件和子组件之间的通信
日期=2020年3月5日14:25
/首页
/div
/模板
正如您所看到的，在这一步中，我们添加了两条需要传递给使用子组件的子组件的数据：标题和日期。
家
Title=的父组件和子组件之间的通信
日期=2020年3月5日14:25
/首页
下一步是使用props在子组件中接收这两个参数。
Home.vue(省略了一些未修改的代码)
脚本
导出默认值{
姓名：家，
道具：[标题，日期]
}
/脚本
在最后一步中，我们可以在vue数据等子组件中使用标题和日期。
Home.vue(省略了一些未修改的代码)
模板
div class=home
p这是家用部件/p
ptitle:{{title}}/p
pdate:{{date}}/p
/div
/模板
启动项目后，浏览器会检查效果。
三、$emit
vue中父组件和子组件之间的第二种通信方式是通过$emit方法，该方法属于子组件并与父组件通信。
$emit方法是vue的一个示例方法，其用法如下：
第一个参数eventName称为事件名称。
事件名对应的事件是原生DOM事件(可以理解为click之类的自定义事件)，由父组件中的v-on监控。
当我们在子组件中执行$emit(eventName)时，父组件中相应的事件将被触发。
所以首先，我们在子组件中使用$emit方法编写代码(不传递第二个参数)来触发父组件中的事件。
Home.vue
模板
div class=home
p这是家用部件/p
El-button type= primary v-on:click= btnclichandler( Yes ) Yes/El-button
El-button type= primary v-on:click= btnclichandler( No ) No/El-button
/div
/模板
脚本
导出默认值{
姓名：家，
方法：{
btnClickHandler:函数(param){
if(param==Yes){
这个。$ emit( say yes )；
}else if(param==No){
这个。$ emit( sayNo )；
}
}
}
}
/脚本
您可以看到Home子组件中有两个按钮。
单击[是]按钮时，此。将执行$emit(sayYes )，触发父组件中的sayYes事件。
单击[否]按钮时，此。$emit(sayNo )将被执行，触发父组件中的sayNo事件。
然后我们在父组件中实现相应的原生DOM事件。
App.vue
模板
div id=应用程序
p以下是应用组件/p
家
说Yes=val=yes
说不=瓦尔=不
/首页
pval: {{val}}/p
/div
/模板
脚本
从导入主页。/组件/主页
导出默认值{
名称：“应用程序”，
data() {
返回{
val:默认，
}
},
组件：{ Home }，
}
/脚本
SayYes和sayNo是在父组件中定义的本地DOM事件。
家
说Yes=val=yes
说不=瓦尔=不
/首页
Val是在父组件中定义的数据data，默认值为 default 。
结合子组件的代码逻辑，我们知道会有以下结果：
单击[是]按钮时，此。$emit(sayYes )将被执行，触发父组件中的sayYes事件，其中vue数据中的val值将被更改为Yes。
单击[否]按钮时，此。$emit(sayNo )将被执行，这将触发父组件中的sayNo事件，vue数据中的val值将在sayNo事件中更改为No。
在浏览器中验证我们的声明。
四、$parent
$parent是vue的一个实例属性，表示当前组件的父实例。
如果父组件中的方法是sayYes，则可以直接使用它。在子组件中调用父组件的方法。
App.vue
模板
div id=应用程序
p以下是应用组件/p
家/家
pval: {{val}}/p
/div
/模板
脚本
从导入主页。/组件/主页
导出默认值{
名称：“应用程序”，
data() {
返回{
val:默认，
}
},
组件：{ Home }，
方法：{
sayYes: function() {
this.val= yes
},
sayNo: function() {
this.val= no
}
}
}
/脚本
两种方法：sayYes在我们的父组件中定义：say yes和sayno。逻辑是：将val的值改为yes将val的值更改为no。
那你可以用这个。$parent.sayYes还有这个。$parent.sayNo调用父组件中相应的sayYes和sayNo方法。
Home.vue
模板
div class=home
p这是家用部件/p
El-button type= primary v-on:click= btnclichandler( Yes ) Yes/El-button
El-button type= primary v-on:click= btnclichandler( No ) No/El-button
/div
/模板
脚本
导出默认值{
姓名：家，
方法：{
btnClickHandler:函数(param){
if(param==Yes){
这个。$ parent . say yes()；
}else if(param==No){
这个。$ parent . sayno()；
}
}
}
}
/脚本
子组件中btnClickHandler方法的代码已更改为。$parent。
那我们来看看结果。
五、总结
到目前为止，已经总结了vue中父子组件的通信方法，分别总结了以下几种方法：
第一种：父组件与子组件通信-props属性
第二种方法：子组件与父组件通信-$emit方法
第三种：子组件与父组件通信-$parent属性
以上就是如何使用Vue实现父子组件通信的细节。更多关于Vue的父组件与子组件通信的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。