第二十四篇 ref 访问子组件

       组件的引入和使用，以及父传子props、子传父$emit所对应的场景有了了解之后，回顾讲到的内容进行这样的一个比喻：

        父传子通过属性，子传父通过事件，尽管有了 props 和 事件，有的时候你仍可能需要在 javascript 里直接访问一个子组件。通过 ref 方法 可以直接访问子组件的实例或子元素；下面通过一张简单的图来了解一下：

        那么父子通信的方式应该是父传子props属性，子传父事件$emit，如果还有才是ref，ref 是需要慎用的，上图也讲到了使用 ref 是一种"偷取"孩子信息以及修改的方式，是一种不恰当的行为方式，会导致直接去修改子组件当中的状态，后续出现问题就不能够清楚知道是子组件自己本身影响导致的问题还是由于父组件去修改了子组件当中的信息导致的问题，无法监控而做出判断。

        如果以上不能理解没关系，通过下面代码来使用继续了解，先来讲一下 ref 的使用：

ref 使用

        在讲 v-mode l指令当中我们有个一个案例，即获取input框当中的数据，当时用了通过监听input框中的数据进而获取；再者讲到 v-model 的双向绑定，可以直接拿到input框中的数据；那么这跟 ref 有什么关系？

ref 绑定在标签上可以拿到原生节点

下面来编写代码和演示效果：

<div id="app">
    <input type="text" ref="mytext"/>
    <input type="submit" @click="handleClick"/>
div>
<script>
    new Vue({
        el:'#app',
        data:{},
        methods:{
            handleClick(){
                console.log(this.$refs)
                console.log(this.$refs.mytext);
                console.log(this.$refs.mytext.value);
            }
        }
    })
script>

        在标签上绑定 ref 我们可以获取到它的原生DOM节点，获取到它的原始DOM节点可以干嘛，可以来操作DOM节点，但是不建议去直接的来操作DOM节点；以上是通过 ref 可以获取到input框数据的一个另类方法，不仅可以放置在input，在任何标签上绑定ref，都可以拿到原始DOM节点；

<div ref="mydiv">refdiv>
// this.$refs.mydiv        

 ref 绑定在标签上可以获取到原始DOM节点，那么绑定到组件上呢？

ref 绑定在组件上可以获取组件对象 -- 组件通信

 下面来编写代码和演示效果：

<div id="app">
    <child ref="mychild">child>
    <button @click="handleClick">获取button>
div>
<script>
    Vue.component("child",{
        template:`
            
                child组件