通过ref进行组件间的通信

ref：绑定dom节点，拿到的就是dom对象；

ref：绑定组件，拿到的就是组件对象；

ref绑在dom节点上：

//绑在dom上，
"text" ref="mytext">
<input type="text" ref="myusername">

//this.$refs拿到的是原生dom节点
console.log(this.$refs)

结果： 

console.log(this.$refs.mytext,this.$refs.myusername)

分别拿到两个input dom节点：

完整代码： 

    <div id="box">
        <input type="text" ref="mytext">
        <input type="text" ref="myusername">
        <button @click="handleAdd">addbutton>
    div>
    <script>
        new Vue({
            el:"#box",
 
            methods:{
                handleAdd(){
                    console.log(this.$refs.mytext,this.$refs.myusername)
                }
            }
        })
    script>
body>

结果：

ref绑在组件上： 

//绑在组件上
"mychild">

//this.$refs.mychild获取的是组件对象，里面有很多组件里的属性方法
console.log(this.$refs.mychild)

结果：

我们在组件里定义一个状态：myname，通过“this.$refs.mychild”就能拿到整个组件对象，所以组件对象里的状态也就可以用访问了：

console.log(this.$refs.mychild.myname)

这样别的组件也就能拿到 child 组件上的状态了；

通过组件拿节点：

• 如果想拿到组件然后再通过组件拿到组件上的跟节点，就需要使用组件对象里的“$el”属性：

console.log(this.$refs.mychild.$el)

• 此时拿到的就是组件上的根节点 

完整代码：

    <div id="box">
        <button @click="handleAdd">addbutton>
 
        <child ref="mychild">child>
    div>
    <script>
        Vue.component("child",{
            template:`
            
child
            `,
            data(){
                return {
                    myname:"child-11111"
                }
            }
        })
        new Vue({
            el:"#box",
 
            methods:{
                handleAdd(){
                    console.log(this.$refs.mychild.myname)
                }
            }
        })
    script>

结果：

• 其他的组件也可以改这个状态；； 

ref的缺点：

因为ref虽然能实现组件之间的通信，但是会造成数据流流向的紊乱，所以一般不用；

 组件之间的通信有几种：

• 父传子--通过自定义属性（兄弟之间的通信通过父组件中间人）
• 子传父--通过自定义事件
• bus方式--发布者、订阅者
• vuex方式
• ref方式--打破组件间的壁垒，直接拿来用