父链 和 子链

父链：this.$parent

$parent 属性可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。

点击子组件中的按钮，修改父组件的数据。

   <div id="app" style="border: 1px solid red;">
        {{ text }} <br><br>
        <child-component></child-component>
    </div>

    var app = new Vue({
            el: '#app',
            data: {
                text: '你好，我是父组件'
            },

            components: {
                'child-component': {
                    template: '<button @click="handle">修改父组件数据</button>',
                    methods: {
                        handle: function () {
                            this.$parent.text = '父组件数据被改了' 
                        }
                    }
                }
            }
        })

点击后：

子链：this.refs

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 特性为这个子组件赋予一个 ID 引用

<a-component ref="a"></a-component>  // a 组件取名为 a
<b-component ref="b"></b-component>  // b 组件取名为 b
<c-component ref="c"></c-component>  // c 组件取名为 c

父组件中有三个按钮，并且有三个子组件，点击 A 按钮，改变 A 组件数据;点击 B 按钮，改变 B 组件数据;点击 c 按钮，改变 c 组件数据;

    <div id="app" style="border: 1px solid red;">
        <button @click="changeA">A</button>
        <button @click="changeB">B</button>
        <button @click="changeC">C</button>

     // 三个子组件，每个子组件都有自己的名字
        <a-component ref="a"></a-component>
        <b-component ref="b"></b-component>
        <c-component ref="c"></c-component>
    </div>



        var app = new Vue({
            el: '#app',
            data: {
            },
            methods: {
                changeA: function () { // 改变 A组件的 text
                    this.$refs.a.text = '被改变了的A'
                },
                changeB: function () { //  改变 B组件的 text
                    this.$refs.b.text = 'B被改变了'
                },
                changeC: function () { // 改变 C组件的 text
                    this.$refs.c.text = '改变C'
                }
            },
            components: {
                'a-component': {
                    template: '<div>{{ text }}</div>',
                    data: function () {
                        return {
                            text: '我是 A组件'
                        }
                    }
                },
                'b-component': {
                    template: '<div>{{ text }}</div>',
                    data: function () {
                        return {
                            text: '我是 B组件'
                        }
                    }
                },
                'c-component': {
                    template: '<div>{{ text }}</div>',
                    data: function () {
                        return {
                            text: '我是 C组件'
                        }
                    }
                }
            }
        })

点击后：