vue2的12种组件间通信方式，父传子，子传父，兄弟传值（超级硬核，宝藏

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux

methods: {

handlerChange(e) {

// 如果有上面的重命名就是这样

this.$emit(“updateValue”, e.target.value);

},

},

};

第二种方式

// 最简单的 v-model实现 父组件 Home

{{ value }}

​

// 子组件 HelloWorld

<input :value=“value” @input=“handlerChange” />

3、 .sync

可以帮我们实现父组件向子组件传递的数据 的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据

// 父组件 Home

{{ val }}

​

​

// 子组件 HelloWorld

<input class=“i911-sync” :value=“val” @input=“handleInput” />

4.、ref

ref 如果在普通的DOM元素上，引用指向的就是该DOM元素;

如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法

// 父组件

​

// 子组件

5、$emit / v-on

在父组件中给子组件绑定自定义事件，然后调用需要的方法，然后在子组件中用 this.$emit 触发父组件的事件，第一个是事件名第二个是参数

// 父组件

<HelloWorld @fn=“fn”>

​

// 子组件

<input type=“text” @blur=“fn(‘我是子组件，可以传参数’)” />

6、$attrs / $listeners

多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时

$attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.$attrs获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过v-bind="$attrs"

$listeners：包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过 v-on=“$linteners”

使用方式是相同的

// 父组件

// 子组件

// 孙组件

// 孙组件

export default {

mounted() {

console.log(this.$attrs);

},

};

​

$listeners使用

//parent组件

<Son @eventOne=‘eventHandler’ @click.native=‘clickHandler’/>

​

//Son组件

//此时Son组件把从父组件传来的监听器，在传给孙组件

​

//GrandSon组件

这是孙组件

7、 $children / $parent的使用

$children：获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组，可以直接拿到子组件中所有数据和方法等

$parent：获取到一个父节点的 VueComponent 对象，同样包含父节点中所有数据和方法等

// 父组件

// 子组件

8、 provide / inject 祖孙之间通信传值

provide / inject 为依赖注入，说是不推荐直接用于应用程序代码中，但是在一些插件或组件库里却是被常用，所以我觉得用也没啥，还挺好用的

provide：可以让我们指定想要提供给后代组件的数据或方法

inject：在任何后代组件中接收想要添加在这个组件上的数据或方法，不管组件嵌套多深都可以直接拿来用

要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象

// 父组件 Home

// 子组件 HelloWorld