通过ref进行组件间的通信

news2024/9/25 17:10:39

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

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

ref绑在dom节点上：

//绑在dom上，
<input type="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节点：

完整代码：

<body>
    <div id="box">
        <input type="text" ref="mytext">
        <input type="text" ref="myusername">
        <button @click="handleAdd">add</button>
    </div>
    <script>
        new Vue({
            el:"#box",

            methods:{
                handleAdd(){
                    console.log(this.$refs.mytext,this.$refs.myusername)
                }
            }
        })
    </script>
</body>

结果：

ref绑在组件上：

//绑在组件上
<child ref="mychild"></child>

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

结果：

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

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

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

完整代码：

<body>
    <div id="box">
        <button @click="handleAdd">add</button>

        <child ref="mychild"></child>
    </div>
    <script>
        Vue.component("child",{
            template:`
            <div>child</div>
            `,
            data(){
                return {
                    myname:"child-11111"
                }
            }
        })
        new Vue({
            el:"#box",

            methods:{
                handleAdd(){
                    console.log(this.$refs.mychild.myname)
                }
            }
        })
    </script>
</body>

结果：