2024年前端最新Vue-5-组件通信(2)，2024年最新字节跳动内容审核面试问题及答案

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

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

// props: [‘name’, ‘sex’, ‘phone’], // 声明组件可接收的属性名称，下面代码简写形式

props:{

//这里可对父元素进行验证，是否是字符串，是否必填

name:{

type:String,

required:true

},

sex:{

type:String,

required:true

}

},

methods:{

//当按钮点击时，定义向父元素传递消息的函数

submitFather(){

//向父元素发送消息

this.$emit(‘listenSon’,{name:“jack”,age:20})

}

}

}

}

})

//实例化Vue，也就是将id=App这个节点挂载到Vue下

const vm=new Vue({

el:‘#app’

})

跨组件层级组件通信

---

1. 转换为父子关系

2. event-bus（事件总线）

• 借助 Vue 实例中的 $on() 与 $emit() 方法来实现：首先创建一个全局的 Vue 实例对象(bus)

• 在需要接收数据的组件中，利用 bus 来注册事件监听（绑定自定义事件）

• 在需要传递数据的组件中，利用 bus 来触发事件并传递数据

3. vuex

4. 示例：当我们点击位于孙元素提交按钮时，父元素的回调函数this.$bus.$on("transmit",val=>{ console.log(val)}) }打印出来自孙元素传递的信息结果{name: ‘jack’, age: 20}