• 12.vue3组件化开发(非父子组件之间的通信和插槽)

    非父子组件之间的通信

    1.方式一:Provide和Inject

    Provide/Inject用于非父子组件之间共享数据.

    一些深度嵌套的组件,子组件想要获取父组件的部分内容,需要将prop沿着组件层级逐渐传递,会非常繁琐.

    利用Provide和Inject,无论层级多深,父组件都可以作为所有子组件的依赖提供者;
    父组件有一个Provide选项来提供数据,
    子组件有一个Inject选项来使用这些数据

    父组件不需要知道它Provide的property被哪些子组件使用;子组件也不需要知道inject的property来自哪里.

    (1)Provide和Inject基本使用

    App.vue 的子组件为Home.vue ;Home.vue的子组件为 HomeContent.vue
    在App.vue中定义数据,在HomeCotent中使用

    HomeContent.vue:

    





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    Home.vue: