面试题：vue组件之间都有哪些通信方式？

Posted 2023-03-24

参考技术A 父子组件通信

绝大部分vue本身提供的通信方式，都是父子组件通信

prop

最常见的组件通信方式之一，由父组件传递到子组件

event

最常见的组件通信方式之一，当子组件发生了某些事，可以通过event通知父组件

style和class

父组件可以向子组件传递style和class，它们会合并到子组件的根元素中

示例

父组件

        importHelloWorldfrom"./components/HelloWorld.vue";exportdefaultcomponents:    HelloWorld,  ,;

子组件

     

渲染结果：

attribute

如果父组件传递了一些属性到子组件，但子组件并没有声明这些属性，则它们称之为attribute，这些属性会直接附着在子组件的根元素上

不包括style和class，它们会被特殊处理

示例

父组件

  <!--除 msg 外，其他均为 attribute-->  importHelloWorldfrom"./components/HelloWorld.vue";exportdefaultcomponents:    HelloWorld,  ,;

子组件

 

渲染结果：

子组件可以通过inheritAttrs: false配置，禁止将attribute附着在子组件的根元素上，但不影响通过$attrs获取

natvie修饰符

在注册事件时，父组件可以使用native修饰符，将事件注册到子组件的根元素上

示例

父组件

        importHelloWorldfrom"./components/HelloWorld.vue";exportdefaultcomponents:    HelloWorld,  ,methods:handleClick() console.log(1);    ,  ,;

子组件

 

渲染结果

$listeners

子组件可以通过$listeners获取父组件传递过来的所有事件处理函数

v-model

后续章节讲解

sync修饰符

和v-model的作用类似，用于双向绑定，不同点在于v-model只能针对一个数据进行双向绑定，而sync修饰符没有限制

示例

子组件

 

父组件

      <!--等同于-->  importNumbersfrom"./components/Numbers.vue";exportdefaultcomponents:    Numbers,  ,data() returnn1:0,n2:0,    ;  ,;

$parent和$children

在组件内部，可以通过$parent和$children属性，分别得到当前组件的父组件和子组件实例

$slots和$scopedSlots

后续章节讲解

ref

父组件可以通过ref获取到子组件的实例

跨组件通信

Provide和Inject

示例

详见： https://cn.vuejs.org/v2/api/?#provide-inject

router

如果一个组件改变了地址栏，所有监听地址栏的组件都会做出相应反应

最常见的场景就是通过点击router-link组件改变了地址，router-view组件就渲染其他内容

vuex

适用于大型项目的数据仓库

store模式

适用于中小型项目的数据仓库

eventbus

组件通知事件总线发生了某件事，事件总线通知其他监听该事件的所有组件运行某个函数

前端技能树，面试复习第 46 天—— Vue 生命周期 | 父子组件钩子的执行顺序 | 组件间通信有哪些方式

1. 说一下 Vue2 的生命周期

Vue2.x 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是 Vue 的⽣命周期。

1. beforeCreate（创建前）：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到 data、computed、watch、methods上的方法和数据。
2. created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 $el 属性。
3. beforeMount（挂载前）：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。
4. mounted（挂载后）：在el被新创建的 vm.$el 替换，并挂载到实例上去之后