Vue进阶（六）：组件之间的数据传递_vue2 额外的,type 还可以是一个自定义的构造函数,

读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

<template>
	<header>
		<div>{{logo}}</div>
	</header>
</template>

这是 header.vue 的 HTML 部分，logo 是在 data 中定义的变量。
如果需要从父组件获取 logo 的值，子组件就需要使用props: ['logo']获取父组件传值。

在 props 中添加元素之后，就不需要在 data 中再添加变量声明。

父组件部分：

在调用组件的时候，使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg。

然后就能将App.vue中 logoMsg 的值传给 header.vue 了：

三、子组件向父组件传递数据

子组件通过事件传递数据给父组件。

子组件部分：

这是 login.vue 的 HTML 部分，当<input>的值发生变化的时候，将 username 传递给 App.vue。

注意⚠️：父组件接收子组件触发的事件时，view部分只添加方法名，不要加()。

首先声明一个方法setUser，用change事件来调用 setUser。

在 setUser 中，使用了 $emit 来遍历 transferUser 事件，并传参this.username。

其中transferUser是自定义事件，功能类似于一个中转，this.username将通过这个事件传递给父组件。

父组件部分：

在父组件 App.vue 中，声明了一个方法 getUser，用 transferUser 事件调用 getUser 方法，获取到从子组件传递过来的参数 username。

getUser方法中的参数 msg 就是从子组件传递过来的参数username。

四、子组件向子组件传递数据

Vue 并没有直接子对子组件传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从子组件传到父组件，再传到子组件。

为便于开发，Vue 推出了一个状态管理工具 Vuex（详参博文《Vue进阶（五）：与 Vuex 的第一次接触》），可以很方便实现组件之间的参数传递。

五、Prop校验

子组件用Props接收父组件传来的数据有多种形式：
1.数组形式

props: [data1, data2]

数组形式相当于直接接收消息，不做任何校验，一般来说，不建议使用数组形式。

2.简单对象形式

 props: { data1: String, data2: Array}

简单对象形式对父组件传递的值进行了类型校验，如果传过来的值类型不一致，控制台会报错。

3.复杂对象形式

 props: { 
  data1: {
    type: String, //设定类型
    required: true, //是否必须
    default: 'default value', //默认值 
    validator (value) {   return (value.length < 5)  } }, //校验规则 
  data2: {  
    type: Array,
    required: true,
    default: () => ['', '', ''] 
 }}

复杂对象校验情况下，作为对象属性的参数可以写为对象形式，参数对象含有4个属性，

• type: 设定参数类型，当传入参数类型与type不相符时，控制台会报错；
• required：设定参数是否是必传，当设为true时，不传该参数会报错；
• default：设定默认值，当参数类型为复杂类型时，需使用工厂模式生成默认值，否则Vue会在控制台抛出警告。
• validator：校验器，是一个函数，拥有一个代表传入值的形参，可以自定义各种校验，当返回false时，会报错，表示没通过校验。

【！】 注意： props 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

类型检查
type 可以是下列原生构造函数中的一个：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

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

14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-rNpk6Qwd-1715841329796)]

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