锐客网

  1. 首页 > it技术 > >

vue3|vue3 非父子组件通信详解

目录

  • 第一种方法
    • App.vue
    • Home.vue
    • HomeContent.vue
    • 数据的响应式
    • 修改响应式Property
  • 总结
    业务场景是，不是父子组件实现通信

    文件目录

    vue3|vue3 非父子组件通信详解
    文章图片


    第一种方法
    App.vue


    Home.vue


    HomeContent.vue

    vue3中使用Provide函数和Inject函数
    事实上我们之前还学习过Provide和Inject，Composition API也可以替代之前的 Provide 和 Inject 的选项。

    我们可以通过 provide来提供数据：

    provide可以传入两个参数：

    name：提供的属性名称；

    value：提供的属性值；

    vue3|vue3 非父子组件通信详解
    文章图片


    在 后代组件 中可以通过 inject 来注入需要的属性和对应的值：

    可以通过 inject 来注入需要的内容；

    inject可以传入两个参数：

    要 inject 的 property 的 name；

    默认值；

    vue3|vue3 非父子组件通信详解
    文章图片


    数据的响应式
    为了增加 provide 值和 inject 值之间的响应性，我们可以在 provide 值时使用 ref 和 reactive。

    修改响应式Property
    如果我们需要修改可响应的数据，那么最好是在数据提供的位置来修改：我们可以将修改方法进行共享，在后代组件中进行调用；
    注意

    如果我们子组件应该是只能使用，不能修改的状态

    vue3|vue3 非父子组件通信详解
    文章图片


    总结 【vue3|vue3 非父子组件通信详解】本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！

      推荐阅读


      上一篇：React组件的生命周期详细描述

      下一篇：详解vue过度效果与动画transition使用示例