vue中父子组件通信方式,vue.js父子组件间通信
本文主要介绍Vue的非亲子组件通信的详细说明。边肖认为这很好。现在分享给大家，给大家一个参考。来和边肖一起看看吧。
目录
第一种方法app . vuehome . vuehome content . vue data Responsive modification Responsive Property summary业务场景是实现通信的不是父子组件。
文件目录
第一种方法
App.vue
模板
差异
家/家
Button @click=addName 添加姓名/按钮
/div
/模板
脚本
从导入主页。/home . vue ；
从“vue”导入{ computed }；
导出默认值{
名称：“应用程序”，
组件：{
家，
},
提供(){
返回{
姓名：张三，
年龄：23，
长度：computed(()=this.names.length)，
};
},
data() {
返回{
姓名：[张三，李四，王五]，
};
},
方法：{
addName() {
this.names.push(去你妈的)；
console . log( hhhh )；
},
},
};
/脚本
样式范围
/风格
Home.vue
模板
差异
我在家/分部。
家庭内容/家庭内容
/div
/模板
脚本
从导入HomeContent。/home content . vue ；
导出默认值{
姓名：家，
组件：{
HomeContent，
},
};
/脚本
样式范围
/风格
HomeContent.vue
模板
div home content:{ { name } }-{ { age } }-{ { length } }/div
/模板
脚本
导出默认值{
注入：[姓名，年龄，长度]，
};
/脚本
style lang=scss 范围
/风格
vue3中使用了提供函数和注入函数。
事实上我们之前还学习过Provide和Inject，Composition API也可以替代之前的 Provide 和 Inject 的选项。
我们可以通过以下方式提供数据：
Provide可以传入两个参数：
名称：提供的属性名称；
Value:提供的属性值；
在 后代组件 中可以通过 inject 来注入需要的属性和对应的值：
可以通过inject注入需要的内容；
Inject可以传入两个参数：
名字；被注入的财产；
默认值；
数据的响应式
为了增加提供值和注入值之间的响应性，我们可以在提供值中使用ref和reactive。
修改响应式Property
如果我们需要修改响应式数据，那么最好是在提供数据的位置进行：我们可以共享修改方法，在以后几代组件中调用；
注意
如果我们的子组件应该处于只能使用而不能修改的状态
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。