2021-10-14 vue笔记-组件化开发(三) 组件通信:非父子通信-ref通信

原创已于 2022-10-16 14:33:54 修改 · 166 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #组件 #ref通信

于 2021-10-14 23:48:00 首次发布

vue学习笔记专栏收录该内容

36 篇文章

订阅专栏

本文介绍了Vue中`$refs`的用法，通过示例展示了如何实现不依赖`v-model`的双向数据绑定，以及如何利用`$refs`进行子组件与父组件间的通信。讲解了`$refs`在普通元素和组件上的不同行为，并提供了具体的代码示例。

0.ref放在标签上,可以拿到原生节点

示例:实现不依靠v-model的双向数据绑定

<div id="app">
	  <!-- 设置ref属性 -->
    <input type="text" ref="mytext">
    <button @click="fn">点击</button>
</div>
<script>
    new Vue({
        el: "#app",
        methods: {
            fn() {
                // console.log(this); //查看输出的实例vue
                // console.log(this.$refs.mytext);//这是input
                console.log(this.$refs.mytext.value); //这是input节点的文本框内容,实现双向绑定
            }
        }
    });
</script>

vue中的$refs:
在这里插入图片描述

1.ref放在组件上,拿到的是组件对象

示例:使用ref实现子传父和父传子

<div id="app">
    <!-- 设置ref属性 -->
    <button @click="fn">点击</button>
    <zujian ref="zjtext"></zujian>
</div>
<script>
    new Vue({
        el: "#app",
        methods: {
            fn() {
                // console.log(this.$refs.zjtext); //获得的是zujian组件
                console.log(this.$refs.zjtext.zjInfo); //获得的是zujian组件中的zjInfo数据:helloworld
                // 既可以子传父又可以父传子,缺点:耦合度高
                console.log(this.$refs.zjtext.add()); //获得的是zujian组件中的add()方法:this is add()
                console.log(this.$refs.zjtext.sonToFather("iSay")); //获得的是zujian组件中的info()方法:iSayhiVue
            }
        },
        components: {
            'zujian': {
                template: `<p>hello</p>`,
                data() {
                    return {
                        zjInfo: "helloworld"
                    }
                },
                methods: {
                    add() {
                        return "this is add()";
                    },
                    sonToFather(info) {
                        info = info + "hiVue"
                        return info;
                    }
                }
            }
        }
    });
</script>