Vue3---父子组件通信(父组件通过provide传递数据，子组件通过inject接受数据)

布满荆棘的人生 2022-10-29 12:25 298阅读 0赞

provide和inject用于父子组件间通信。父组件使用provide来传递数据、函数等到子组件，子组件使用inject来接受。当传递的数据是响应式数据，父组件更新时，子组件也会自动更新。

[官方APIhttps://v3.cn.vuejs.org/guide/composition-api-provide-inject.html\#%E5%93%8D%E5%BA%94%E6%80%A7![icon-default.png?t=L892][icon-default.png_t_L892]https://v3.cn.vuejs.org/guide/composition-api-provide-inject.html\#%E5%93%8D%E5%BA%94%E6%80%A7][APIhttps_v3.cn.vuejs.org_guide_composition-api-provide-inject.html_E5_93_8D_E5_BA_94_E6_80_A7_icon-default.png_t_L892_icon-default.png_t_L892_https_v3.cn.vuejs.org_guide_composition-api-provide-inject.html_E5_93_8D_E5_BA_94_E6_80_A7]

*  父组件，导入provide并通过provide传值(provide只能在setup的最外层使用，不能在自定义的函数中使用，否则无效)

<template>
        <h1>父级组件</h1>
        <div>当前颜色：{
       { color }}</div>
        <div>
            <el-button type="danger" @click="changeColor('red')">红色</el-button>
            <el-button type="primary" @click="changeColor('blue')">蓝色</el-button>
            <el-button type="success" @click="changeColor('green')">绿色</el-button>
        </div>
        <hr />
        <Son />
    </template>
    <script>
    import { defineComponent, provide, ref } from 'vue'
    import Son from '../components/Son'
    
    
    export default defineComponent({
        name: 'Parent',
        components: {
            Son
        },
        setup(){
            const color = ref('red')
            function changeColor (newColor) {
                color.value = newColor
            }
            provide('currentColor', color) // provide传值，provide只能在setup的最外层使用
            return {
                color,
                changeColor
            }
        }
    })
    </script>

*  子组件，注：子组件也是可以通过inject接受到父组件传过来的值

<template>
        <h1>子组件</h1>
        <hr />
        <Grandson />
    </template>
    <script>
    import { defineComponent } from 'vue'
    import Grandson from '../components/Grandson'
    
    export default defineComponent({
        name: 'Son',
        components: {
            Grandson
        },
        setup(){
            return {}
        }
    })
    </script>

*  孙子组件，导入inject并通过inject接受最上级组件传的值

<template>
        <h1 :style="{color}">孙子组件</h1>
    </template>
    <script>
    import { defineComponent, inject } from 'vue'
    
    export default defineComponent({
        name: 'Grandson',
        setup(){
            const color = inject('currentColor') // inject接受值
            return {
                color
            }
        }
    })
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 2][]

[icon-default.png_t_L892]: https://csdnimg.cn/release/blog_editor_html/release1.9.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=L892
[APIhttps_v3.cn.vuejs.org_guide_composition-api-provide-inject.html_E5_93_8D_E5_BA_94_E6_80_A7_icon-default.png_t_L892_icon-default.png_t_L892_https_v3.cn.vuejs.org_guide_composition-api-provide-inject.html_E5_93_8D_E5_BA_94_E6_80_A7]: /images/20221024/6469bf78b071453d9ba80919ea9d76a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70]: /images/20221024/6145b7c4ec324f71987ad55b8cd3fc0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 1]: /images/20221024/239bcceeb67949b5bb87cdd0490c41e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 2]: /images/20221024/2c43de379bb2427a8ae09078a6708eda.png