Vue核心面试题（obsoleted）

Vue组件间是如何通信的？

• 父传子，PropsDown:

//子元素需要声明name这个props
<Son :name="'狗剩'"/>
const Son = {
    props:["name"]
}

• 子传父，EventsUp:

<Son @giveMeSomMoney="pay($event)" />
const Son = {
    emits:["giveMeSomMoney"],
    ...
    this.$emit("giveMeSomMoney",2000)
    ...
}

• 祖传孙：provide/inject

const Grandfather = {
    // 全局透传数据，任何后代组件都可以通过inject获取这些数据
    provide(){
        return {
            dabaojian:"祖传的大宝剑，手法犀利，制敌于无形"，
            otherData: this.otherData
        }
    }
}

const Grandson = {
    inject:["dabaojian","otherData"]
    ...
    methods:{
        useDabaojian(){
            console.log(this.dabaojian)
        }
    }
    ...
}

• 事件总线：

第三方事件总线库，任意组件可以发布事件，其余组件可以订阅事件；一旦有组件发布特定类型的事件，则订阅者能够接收并回调事件的处理逻辑；本质是观察者模式；事件总线开销较大，并不是很推荐使用，无障碍组件通信的正确打开方式应为全局状态管理；

npm i pubsub-js
import Pubsub from 'pubsub-js'

//订阅事件
//Pubsub.subscribe('事件类型'，事件处理函数)
Pubsub.subsrcibe('myEvent',(_,eventData){...})

//发送事件
Pubsub.publish('myEvent',eventData)

//取消订阅（以释放内存）
Pubsub.unsubsrcibe('myEvent')

• 全局状态管理

敬请期待

Vue组件的生命周期与父子联动关系

Vue3相比Vue2有哪些更新？

谈谈对插槽的理解

• 父组件想把一段DOM结构插入子组件就需要用到插槽；
• 插槽有三种形态：默认插槽，具名插槽，作用域插槽；
• 默认插槽：子组件只定义了一个插槽，此时父组件写在子组件起始与闭合标签以内的结构即覆盖子组件的默认插槽；
• 具名插槽：子组件定义了多个插槽，并给每个插槽以不同的名字，父组件通过插入多段DOM结构，并给每段DOM结构以对应的插槽名称；
• 作用域插槽：父组件想讲子组件自己的数据插在其自己的插槽中，就需要使用作用域插槽；
• 作用域插槽的使用方式：父组件在使用具名插槽时给该插槽一个任意别名（如slotProps），该别名指代子组件的作用域，随后即可通过该别名将子组件插槽暴露出的数据插入子组件的插槽，前提是子组件在定义插槽时必须提前对外暴露一些数据；

子组件child的模板

<div> 
  <!--定义插槽 名称为footer 对外暴露数据testProps-->
  <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
    </slot>
</div>

父组件使用

<child> 
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:footer="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
    <template #default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
</child>