组件访问（父访子与子访父）当我们想要实现在父组件上进行操作后访问子组件的功能或者数据时，可以使用 $refs 或$c

当我们想要实现在父组件上进行操作后访问子组件的功能或者数据时，可以使用 $refs 或$ children 来实现。同样的，先注册一个实例以及一个子组件

 const cpn = {
            template: '#cnp',
            data() {
                return {
                  name:'我是傻逼'
                }
            },
            methods:{
                showinfo(){
                    console.log('showinfo');
                }
            }
        }
        const app = new Vue({
            el: "#app",
            data: {

            },
            components: {
                cpn
            },
        }) 
    <template id="cnp">
        <div>我是个屑子组件</div>
    </template>
    <div id="app">
        <cpn></cpn>
        <cpn ></cpn>
        <cpn></cpn>
        <button @click = 'btnClick'>访问子组件</button>
    </div>

我们在子组件中声明一个函数以及一个数据用于模拟父组件的访问,在父组件中注册一个自定义事件，用于做访问子组件的触发器。接着，在父组件中注册该事件。

 methods:{
                btnClick(){
                    //  1.$children 获得一个对象数组（里面装的是所有的子组件）
                      console.log(this.$children);
                     this.$children[0].showinfo();
                     for(let CPN of this.$children){
                         console.log(CPN.name);
                         CPN.showinfo();
                     }
                }
            }

$children获取的是该父组件的所有子组件，在大部分时间中我们都想要精确的获取其中的某一个子组件，这个时候，我们就需要通过$ refs来进行精确定位了

<div id="app">
        <cpn></cpn>
        <cpn ref='aaa'></cpn>
        <cpn></cpn>
        <button @click = 'btnClick'>访问子组件</button>
    </div>
       methods:{
                btnClick(){
                    // 2. $refs 获得的是一个对象
                    console.log(this.$refs.aaa.name);
                    this.$refs.aaa.showinfo();
                }
            }

在希望准确获取的子组件上增加一个ref属性（类似于Key），便可以实现对该组件的访问。值得一提的是，如果出现两个及以上ref属性值相同的子组件，最后通过$refs访问的子组件是第一个。

类似的，想要实现子访父，则通过 $parent实现。但是不推荐使用子访父：在开发时，若要用子访父，会使子组件的开发受父组件开发的限制、不够独立、复用性不强。特别的，有$ root—访问根组件

组件访问（父访子 与 子访父）

组件访问（父访子与子访父）