二十一、Vue组件化开发-组件之间的访问-父组件调用子组件

先来看看这样一个问题。a.html与b.html文件，a.html文件中通过ifreame引入了b.html文件，两者之间就形成了父子关系，a.html为父，b.html文件为子，那么a.html文件想要调用b.html文件中的某个js方法，该怎么？

同理，Vue父子组件之间也可以这样看，父组件若要调用子组件中的方法或者子组件要调用父组件中的某个方法，该如何实现？

父组件访问子组件

Vue中提供了$children属性与$refs属性用于父组件访问子组件。其中$children得到的是一个数据，但是，$children属性在开发中不常用，推荐使用$refs属性。

使用$children属性访问子组件（不推荐）

<div id="app">
    <com1></com1>
    <button @click="clickSubSon">获取子组件中的数据</button>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{

        },
        methods: {
            clickSubSon () {
                // 父组件访问子组件.this.$children
                console.log(this.$children);
                console.log(this.$children[0].getCom1Say());
            }
        },
        components:{
            // 定义一个子组件
            com1:{
                template:`<div>我是子组件1</div>`,
                data () {
                    return {
                        title:'我是子组件1的标题'
                    }
                },
                methods:{
                    getCom1Say() {
                        console.log('子组件1的方法');
                    }
                }

            }
        }
    });
</script>

在此案例中，<com1></com1>组件只使用了一次，若调用三次，在编码2之前新增一个com2子组件。原本想获取编号为2的子组件中的数据，通过this.$children[1]来访问，新增com2子组件之后，需要改为this.$children[2]才能访问，很麻烦。好在Vue中可以通过$refs来访问。

<com1></com1><!--编号1-->
<com1></com1><!--编号2-->
<com1></com1><!--编号3-->

一句话简述：$refs就是给组件起一个名字，然后通过名字来获取该组件的信息。

通过$refs为子组件起名字来访问(推荐)

下面来改造上面的案例，通过使用$refs来访问子组件的信息。

<div id="app">
    <com1></com1>
    <com1 ref="ca2"></com1>
    <com1 ref="ca1"></com1>
    <button @click="clickSubSon">获取子组件中的数据</button>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{

        },
        methods: {
            clickSubSon () {
                // 获取所有ref了组件
                console.log(this.$refs);
                // 获取ref指定名字的子组件
                console.log(this.$refs.ca1);
                console.log(this.$refs.ca1.title);
            }
        },
        components:{
            com1:{
                template:`<div>我是子组件1</div>`,
                data () {
                    return {
                        title:'我是子组件1的标题'
                    }
                },
                methods:{
                    getCom1Say() {
                        console.log('子组件1的方法');
                    }
                }

            }
        }
    });
</script>

案例剖析

1）通过ref为子组件定义一个名字；

2）父组件中使用$refs获取子组件

总结

父组件访问子组件：使用$children、$refs。推荐使用$refs

2020-12-05