这期是组件通信的最后一期，把剩余的组件通信方式再全部介绍一下。

分别是provide/inject 和 $parent/＄children。

我们用下面这个示例，把这两种通信方式全部展示一下。

html"><div id="app">
    <App></App>
</div>

  <script>
        Vue.component('B',{
            data(){
                return{
                    title:'我是B组件 孙子'
                }
            },
            template:`
                <div>
                    我是全局组件B
                    <p>{{msg}}</p>
                </div>
            `,
            inject:['msg'],
            created () {
                console.log('B组件的created:',this.msg);
            }
        })
        Vue.component('A',{
            data () {
                return {
                    title:'我是A组件  儿子'
                }
            },
            created(){
                console.log('A组件的created:',this.$parent.title);
            },
            template:`
                <div>
                    <B></B>
                    <button @click="handleClick">获取小儿子组件的title</button>
                </div>
            `,
            methods: {
                handleClick(){
                    console.log('A组件的点击事件:',this.$children[0].title);
                }
            }
        })
        const App = {
            data () {
                return {
                    title:'App组件是老爹'
                }
            },
            template:`
                <div>
                    <A></A>
                </div>
            `,
            provide(){
                return{
                    msg:'我是App组件提供的数据'
                }
            },
            created () {

            }
        }

        new Vue({
            el:'#app',
            components:{
                App
            }
        });
    </script>

我们分别写了一个全局组件B，一个全局组件A，一个局部组件App
A使用了B，App使用了A
所以它们之间是三层的父子关系，产生了隔代的情况，这主要这是为了验证一下provide/inject通信的特点。

provide/inject这种通信方式的原理就是父组件中通过provide来提供变量，然后再子组件中通过inject来注入变量，无论组件嵌套多深。

注意一点，无论组件嵌套多深，所以我故意写了三个组件，产生了隔代的情况，看看能否实现通信。

然后看一下示例代码，我们在App这个组件中，使用了provide，因为它是最上层的组件，我们return了一个msg。
然后看一下B组件，我们写了一个inject属性，以数组的形式注入了msg这个App组件return过来的值。

因为我们在示例中还展示了**$parent/＄children通信的内容，所以，我们把这种通信也介绍一下，再看页面的渲染结果**。

$parent/＄children这种通信方式，不建议经常用。

官方文档是这样介绍的：

指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。

节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events实现父子组件通信

然后看一下我给出的示例代码。
主要是看A组件，因为它是起到一个中间组件的作用。既是B组件的父亲，又是App组件的儿子，所以我选择在这个组件上介绍这种通信过程。

在A组件的created中，我们直接通过this.$parent.title，即可获取到App组件的title值。
然后我们写了一个按钮，通过this.＄children[0].title来获取B组件这个儿子中的title值。

这里其实可以看出，我们用**$parent的时候，可以直接用，但是用＄children的时候，加了[0]，说明＄children是以数组形式存放的，我们只是取了它第一个值**。这里官方文档也有介绍。

好滴，到现在为止我已经把示例代码的两种通信方式的具体实现进行了分析。

现在我们看一下实际的页面展示的效果，能否拿到预期的数据。


因为这次一下介绍了两种通信方式，这个结果看起来可能有点乱哦，所以我都把每一个结果进行了标注。

还是按照官方文档的说法 $parent/＄children 这种通信方式是应急方法，不推荐经常使用，坑也比较多。

到现在为止，我们已经把Vue中组件通信的内容都说完了。Vue的组件化开发是最最最重要的内容，所以，一定要多加练习哦。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodehtml" title=js>js、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！