ref实现父子组件之间通信

Posted 2023-03-28

参考技术A 在此我们必须先明确知道什么是ref， ref 是 reference 引用 DOM操作进行父子通信，在vuejs 里面作者不建议进行DOM操作，把DOM操作都换成指令。
平时我们收集数据是通过v-model来的吧，举个简单的例子

这样点击显示用户信息就能显示出输入框相应的数据，但能否不用v-model操作呢？是可以的，只要写成这样

同时将方法改成

这个this. refs.png]( https://upload-images.jianshu.io/upload_images/19871099-1b369d6d07704c57.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )
我们可以通过这种方式获得输入框的值

所以我们也就可以利用拿到了这个值做父子通信了。

经过很多次实验，不知道为什么很多都是undefined，所以只能将ref绑定在调用的时候，输入框还是要用v-model来监听数据的，只是找对应的值的时候比较复杂。

，子组件如何给父组件传递信息呢？
那我们依旧还是利用事件的传递，在子组件添加一个按钮，点击后绑定一个事件

点击按钮我们就可以看到打印的内容
,我们也可以拿到跟组件

我们可以在父组件定义一个回调函数，用于接受子组件传递过来的数据

子组件在负责把数据发送给父组件

最后一起显示在页面上

vuevue +element 搭建项目，组件之间通信

父子组件通信

父 通过$ref属性给 子传递数据

子 操作 父  this.$parent.XXX

或者通过vue-bus

vue-bus既可以实现父子组件之间的通信，也可以实现兄弟组件之间的通信

vue-bus安装

(c)npm install vue-bus

引入

import Vue from ‘vue‘;
import VueBus from ‘vue-bus‘;

Vue.use(VueBus);

应用：

发送：
 this.$bus.$emit(‘closeMenu‘, {});
接收：
this.$bus.on("closeMenu", () => {
     this.isOpen = false;
});

 

参考链接：

• https://cn.vuejs.org/v2/api/#vm-on
• https://segmentfault.com/a/1190000007443133