vue父子组件和兄弟组件通信问题,vue 父组件触发子组件事件
组件是Vue的核心功能之一。合理的组件化可以减少我们代码的冗余，提高项目的可维护性。下面文章主要介绍Vue中亲子组件的通信和事件触发的相关信息。有需要的可以参考一下。
目录
I .组件子组件父组件II。亲子组件通信。父组件与子组件通信。子组件与父组件III通信。父子组件事件触发父组件调用子组件中的事件方法。子组件调用父组件IV中的事件方法。摘要
一、组件
子组件
模板
div style=border:1px纯黑；宽度：400px高度：130像素；
H3我是子组件/h3
按钮子组件将值传递给父组件/按钮。
div组件接收父组件的值：/div
/div
/模板
父组件
模板
div style=border:1px纯红；填充：2rem宽度：400px边距：0自动；
H3我是父组件/h3
div组件传递给父组件的值：/div
孩子/孩子
/div
/模板
脚本
从导入子级。/Child ；
导出默认值{
组件：{
儿童
}
}
/脚本
效果显示：
从这个图中，我们可以看到父子组件的结构。我们来练习一下亲子组件交流。
二、父子组件通信
父组件给子组件通信
实现思路：子组件通过props接受父组件传递的值。
在父组件中，定义一个数据变量，并将该值动态绑定到子组件标签中。
//Father.vue
模板
div style=border:1px纯红；填充：2rem宽度：400px边距：0自动；
H3我是父组件/h3
div组件传递给父组件的值：{{ChildMsg}}/div
Child :FatherMsg=data/Child
/div
/模板
脚本
从导入子级。/Child ；
导出默认值{
data() {
返回{
数据：“我是你爸爸”，
}
},
组件：{
儿童
}
}
/script然后通过子组件中的props接收，以便组件接收父组件传递的值。
//Child.vue
模板
div style=border:1px纯黑；宽度：400px高度：130像素；
H3我是子组件/h3
按钮子组件将值传递给父组件/按钮。
div组件传递给子组件的值：{{FatherMsg}}/div
/div
/模板
脚本
导出默认值{
data() {
返回{
数据：“我是你的孩子”，
}
},
道具：[FatherMsg]
}
/脚本
可以看到，我们的父组件与子组件之间的通信已经实现，接下来就是子组件与子组件之间的通信了。这个会用这个。$emit方法。
子组件向父组件通信
实现思路：用这个。$emit在子组件中触发自定义事件并传递值，然后在父组件中侦听事件。
将click事件添加到子组件中的button按钮，以通过此自定义事件。$emit，并传入一个参数：
模板
div style=border:1px纯黑；宽度：400px高度：130像素；
H3我是子组件/h3
Button @click=send 子组件将值传递给父组件/button
div组件传递给子组件的值：{{FatherMsg}}/div
/div
/模板
脚本
导出默认值{
data() {
返回{
数据：“我是你的孩子”，
}
},
道具：[FatherMsg]，
方法：{
send() {
这个。$emit(ListenChild ，this . data)；
}
}
}
/script在父组件的子组件标签中，首先在数据中定义一个变量来接收该值，然后监视子组件中定义的事件，并接受对已定义变量的参数赋值：
模板
div style=border:1px纯红；填充：2rem宽度：400px边距：0自动；
H3我是父组件/h3
div组件传递给父组件的值：{{ChildMsg}}/div
Child:father msg= data @ listen Child= listen Child /Child
/div
/模板
脚本
从导入子级。/Child ；
导出默认值{
data() {
返回{
数据：“我是你爸爸”，
ChildMsg: ，
}
},
组件：{
儿童
},
方法：{
ListenChild(数据){
console.log(子组件传递过来的值：,数据);
这个ChildMsg=数据
}
}
}
/脚本点击子组件中的"子组件将值传递给父组件",就可看到如下效果：
三、父子组件事件触发
父组件调用子组件中的事件方法
通过裁判员直接调用子组件的方法：
//Child.vue
模板
div style=border: 1px纯黑；宽度：150像素边距：10px自动
我是子组件
div style= color:red"{ msg } }/div
/div
/模板
脚本
导出默认值{
data() {
返回{
消息： ,
}
},
方法：{
childFun() {
console.log(我是子组件的方法童趣’)；
this.msg=我的方法被调用了
},
},
};
/脚本
在子组件标签上添加裁判员属性，然后在方法中通过这个。$参考文献找到绑定裁判员的属性调用该子组件内的方法即可。
//Father.vue
模板
div style=border: 1px纯红；宽度：200像素填充：10px边距：0自动
我是父组件
Button @click=handleClick 点击调用子组件方法/按钮
Child ref=child /
/div
/模板
脚本
从导入子级.子；
导出默认值{
组件：{
儿童
},
方法：{
handleClick() {
这个参考文献。孩子。童趣()；
},
},
}
/脚本通过组件的$ emit，$ on方法：
//Child.vue
模板
div style=border: 1px纯黑；宽度：150像素边距：10px自动
我是子组件
div style= color:red"{ msg } }/div
/div
/模板
脚本
导出默认值{
data() {
返回{
消息： ,
}
},
已安装(){
这个. on(childFun ，function() {
console.log(我是子组件方法);
this.msg=我的方法被调用了
});
}
};
/脚本
在子组件中使用$on绑定一个方法，然后在父组件中通过$emit找到绑定$on上面的事件名即可，但是也需要裁判员的配合。
//Father.vue
模板
div style=border: 1px纯红；宽度：200像素填充：10px边距：0自动
我是父组件
Button @click=handleClick 点击调用子组件方法/按钮
Child ref=child /
/div
/模板
脚本
从导入子级.子；
导出默认值{
组件：{
儿童
},
方法：{
handleClick() {
//子组件$on中的名字
这个$refs.child.$emit(childFun )
},
},
}
/脚本两种实现方式效果一致。
调用方法前：
调用方法后：
子组件调用父组件中的事件方法
直接在子组件中通过这个父母来调用父组件的方法
//Father.vue
模板
div style=border: 1px纯红；宽度：200像素填充：10px边距：0自动
我是父组件
孩子/孩子
div style= color:red"{ msg } }/div
/div
/模板
脚本
从导入子级.子；
导出默认值{
data() {
返回{
邮件：""
}
},
组件：{
儿童
},
方法：{
fatherMethod() {
console.log(我的父组件中的方法);
this.msg=我的方法被子组件调用了；
}
}
};
/脚本
//Child.vue
模板
div style=border: 1px纯黑；宽度：150像素边距：10px自动
我是子组件
button @click=childMethod 点击调用父组件方法/按钮
/div
/模板
脚本
导出默认值{
方法：{
childMethod() {
这个$家长。父方法()；
}
}
};
/脚本在子组件里用$emit向父组件触发一个事件，父组件监听这个事件（推荐使用)
//Father.vue
模板
div style=border: 1px纯红；宽度：200像素填充：10px边距：0自动
我是父组件
子@父方法=父方法/子
div style= color:red"{ msg } }/div
/div
/模板
脚本
从导入子级.子；
导出默认值{
data() {
返回{
邮件：""
}
},
组件：{
儿童
},
方法：{
fatherMethod() {
Console.log(我的父组件中的方法)；
This.msg=我的方法被子组件调用；
}
}
};
/脚本
子组件可以使用$emit来触发父组件的自定义事件。
//Child.vue
模板
div style=border: 1px纯黑；宽度：150px边距：10px自动
我是一个子组件。
Button @click=childMethod 单击以调用父组件方法/按钮
/div
/模板
脚本
导出默认值{
方法：{
childMethod() {
//fatherMethod父组件方法
这个。$ emit( father method )；
}
}
};
/script父组件将该方法传递给子组件，并在子组件中直接调用该方法：
//Father.vue
模板
div style=border: 1px纯红；宽度：200px填充：10px边距：0自动
是我的父组件。
Child:father method= father method /Child
div style= color:red“{ msg } }/div
/div
/模板
脚本
从导入子级。/Child ；
导出默认值{
data() {
返回{
邮件：“”
}
},
组件：{
儿童
},
方法：{
fatherMethod() {
Console.log(我的父组件中的方法)；
This.msg=我的方法被子组件调用；
}
}
};
/脚本
父组件可以将事件绑定到子组件的标签上，子组件使用props接收父组件的事件。
//Child.vue
模板
div style=border: 1px纯黑；宽度：150px边距：10px自动
我是一个子组件。
Button @click=childMethod 单击以调用父组件方法/按钮
/div
/模板
脚本
导出默认值{
道具：{
父方法：{
类型：功能，
默认值：空
}
},
方法：{
childMethod() {
if (this.fatherMethod) {
this . father method()；
}
}
}
};
/script以上三种实现效果相同。
在调用方法之前：
调用方法后：
四、总结
至此，Vue和它的亲子组件之间的大部分操作都已经涉及到了，我们在程序开发的过程中就可以对这部分驾轻就熟了。
关于Vue中亲子组件的通信和事件触发的这篇文章到此为止。关于Vue中亲子组件的通信和事件触发的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。