第二十四篇 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">ref</div>
// this.$refs.mydiv        

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

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

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

<div id="app">
    <child ref="mychild"></child>
    <button @click="handleClick">获取</button>
</div>
<script>
    Vue.component("child",{
        template:`
            <div>
                child组件
            </div>
        `
    })
    new Vue({
        el:'#app',
        data:{},
        methods:{
            handleClick(){
                console.log(this.$refs) 
            }
        }
    })
</script>

         拿到组件对象有什么用？里面不就有组件的一些状态和方法；那么前面我们在讲父传子和子传父用到下面这张图：

         下面针对 ref 来个图，可以进行一个对比；

        通过图片内容可以知道，父传子和子传父的方式是不需要担心会对原始数据进行修改后无迹可寻，而使用 ref 可以很粗暴的就直接拿到子组件当中的数据，甚至可以进行修改子组件中的数据，一旦多个组件同时使用则会很难知道到底时谁修改了子组件中的数据，不仅是要检查子组件还有检查父组件；

<div id="app">
    <child ref="mychild"></child>
    <button @click="handleClick">获取</button>
</div>
<script>
    Vue.component("child",{
        template:`
            <div>
                <p>孩子有{{money}}块</p>
            </div>
        `,
        data(){
            return{
                money:1000
            }
        }
    })
    new Vue({
        el:'#app',
        data:{},
        methods:{
            handleClick(){
                console.log("我能直接拿到：",this.$refs.mychild.money);
                console.log("我给花了800块");
                this.$refs.mychild.money = 200; 
            }
        }
    })
</script>

        通过以上对 ref 的讲解大致知道了使用 ref 绑定在组件上可以直接获取子组件对象，不用经过子组件的同意可以直接拿到子组件中的状态和方法并加以去修改；如果mychild又在其他组件当中去使用，一整改出问题，就不清楚问题出在哪里，使用父传子还是子传父，数据状态出现问题了只需要去检查子组件当中的问题即可，不需要去检查父组件是否去操作修改了我的数据，这样一来使用 ref 去直接操作子组件当中的一些东西是不够妥当的！那么到这里我们就讲了有关于组件通信当中 ref 方法的使用和使用 ref 能做什么和带来什么问题！