vue组件嵌套组件,vuejs组件通信
Vue通过provide inject的两个关键字完成父组件到后代组件的值的直接传递，和子类可以使用父类的属性一样方便。Proviinject一般用于多层之间传递值，props用于两层之间。
目录
前言示例摘要
前言
在vue父子组件之间，很容易通过props将父组件的值传递给子组件。如果一个组件嵌套了很多层，那么每层之间的值都需要用道具传递，非常麻烦，维护起来也很困难。
示例
【示例】组件A中使用组件b，组件b中使用组件c，组件c需要使用组件A的数据文本和组件A的方法getmethod，A组件代码如下：
模板
差异
警：这是部件a /P
v形梳/v形梳
/div
/模板
脚本
从“@/view/comB.vue”导入梳子
导出默认值{
姓名：“昏迷”，
组件：{
“v形梳”:梳子
},
data() {
返回{
消息：“我是组件A中的数据”
}
},
Provide: function() {//注入子组件属性和方法
返回{
正文：this.msg，
getMethod: function() {
Console.log(在根组件中执行getMethod方法)
}
}
}
}
/脚本
使用关键字provide向子组件公开数据和方法。
组件b是组件a的子组件，也是组件c的父组件，代码如下
模板
差异
差异
P组件b /P
v-comc/v-comc
/div
/div
/模板
脚本
从“@/view/comC.vue”导入comC
导出默认值{
名称：梳子，
组件：{
“v-comC”:comC
}
}
/脚本
组件C是组件a的孙子，组件C需要使用组件a的数据和方法，代码如下：
模板
div style=border:1px纯色橙色；颜色：橙色；
差异
这是c组件/P
div{{text}}/div
Button @click=getMethod 调用父组件方法/按钮
/div
/div
/模板
脚本
导出默认值{
名称： comC ，
Inject: [text ， getMethod]//Text和getMethod是Provider提供的名称。
}
/脚本
在这里使用inject关键字来接收组件a公开的信息，这里要特别注意。inject: []中的接收名称必须与provide提供的名称完全相同。
运行，界面如下图所示。
小结
多级组件嵌套通信，vue通过provide inject两个关键字完成父组件到后代组件的直接值传递，使用起来非常方便。有问题的子组件和父组件之间有很强的耦合关系，不建议作为最后手段使用。
以上是vue前端开发级嵌套组件通信的详细内容。关于vue级嵌套组件通信的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。