vue3.0父子组件传值,vue父子组件之间的传值
本文主要介绍vue3中非父子组件的值传递，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
app . vue sub 1 . vue sub 2 . vue摘要
vue2中非父子组件的值传递主要是通过事件总线，创建一个vue实例，通过将实例导入到不同的组件中，实现非父子组件之间的通信行为。
Vue3提供**provide**和**inject**属性，可以实现非父组件与子组件之间的通信；
假设有三个组件：App.vue (parent)，sub1 (child)，sub2 (child的child):
App.vue
模板
div style=border: 1px纯粉色
H1我是你的父亲/h1
span/span
sub1/
/div
/模板
脚本
从导入sub1。/sub1
导出默认值{
名称：“应用程序”，
组件：{
sub1，
},
Provide:{ //通过在父组件中定义Provide来声明要传递的值
名称：[peanut ， javascriptKing]
}
}
/脚本
样式范围
/风格
sub1.vue
模板
H2 I是1级/h2的子组件
span/span
sub2/
/模板
脚本
从导入sub2。/sub 2’；
导出默认值{
名称： sub1 ，
组件：{
sub2，
}
}
/脚本
样式范围
/风格
sub2.vue
模板
H3我最小，也就是孙子/h3
Div I引用了顶级组件的名称数组==={{names}}/div
/模板
脚本
导出默认值{
名称： sub2 ，
//通过注入接受子组件中的跨级值
注入：[names]，
}
/脚本
样式范围
/风格
实施效果如下。可以看到，在顶级组件中传递的值可以正常获得：
但是也会出现问题：
也就是说，当顶层组件要传递的值发生变化时，它如何做出响应？
如何在provide属性中通过这个获取当前实例？
这里您需要以方法的形式编写provide属性，并返回一个数组或对象：
模板
div style=border: 1px纯粉色
H1我是你的父亲/h1
span/span
sub1/
/div
/模板
脚本
从导入sub1。/sub1
导出默认值{
名称：“应用程序”，
data(){
返回{
名称：[peanut ， javascriptKing]
}
},
组件：{
sub1，
},
/*这样写是得不到这个的。这只是希望脚本中的范围未定义*/
/*提供：{
这个名字，
}*/
//应该这样写
提供(){
返回{
名称：this.names
}
}
}
/脚本
样式范围
/风格
这样写，虽然可以得到这个指向的实例下的数据，但是如何让它们形成依赖关系，实现响应呢？为此，我们需要对App.vue进行以下修改：
模板
div style=border: 1px纯粉色
H1我是你的父亲/h1
span/span
sub1/
/div
/模板
脚本
从导入sub1。/sub1
从“vue”导入{ computed }
导出默认值{
名称：“应用程序”，
data(){
返回{
名称：[peanut ， javascriptKing]
}
},
组件：{
sub1，
},
/*这样写是得不到这个的。这只是希望脚本中的范围未定义*/
/*提供：{
这个名字，
}*/
//应该这样写
提供(){
返回{
names:computed(()={ this . names . length })//使用computed属性返回此变量，使得名称与数据中的名称形成依赖关系。
}
},
已安装(){
setInterval(()={
This.names.push(国王万岁！)
},1000)
}
}
/脚本
样式范围
/风格
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。