Web前端最新vue工程各组件传值大总结，字节跳动前端面试题解析

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一、父子关系如何界定

==========

要传值先搞清楚组件关系，父子关系如何界面，官网中没有明确说明，个人觉得看template，B组件作为components注册到A.vue，A.vue中template里面有,B组件作为一个标签使用到A组件中，那么A就是父组件，B就是子组件，如果C组件跟B组件一样，作为A组件template中的一个标签，那么BC就是兄弟组件。

二、父to子组件

========

1、详细步骤

• 子组件props中定义需要接受父组件的变量getVar

export default{

//接受父组件值的变量

props：{

getVar：{

type：String, //指定传入类型的话，如果传入的类型不对，就会警告

default：false, //不带默认值

//default：‘a’, //带默认值，如果没传值进来，就显示默认值

}

}

}

chartType: {

type: String,

default: “Line”

},

chartOptions: {

type: Object, //传入一个object

default: () => {

return {};

}

},

chartData: {

type: Object,

default: () => { //传入一个object，带指定内容的

return {

labels: [],

series: []

};

}

},

initData:{

type:Array,

default:() =>{ return [] }

}

• 父组件中引入子组件，并给getVar传值

使用方法：<子组件     ：子组件定义的变量名=‘父组件传值的变量名’></子组件>

// 父组件

//作为标签进来，就是子组件，在子组件中，用:子组件中定义

的变量名来传值

2、大坑

子组件接受一次值以后，任父组件传的值怎么变，父组件都不变化了。

解决办法：父组件中用一个中间值，页面中绑定这个中间值，watch监听props值的变化，变化后把新的赋值给中间值。

三、子to父组件

========

子to父传值是通过方法来传递的，子组件需要传值的地方触发事件来通知父组件需要改变数据。

1、子组件中：

this.$emit(“onChildByValue”, this.childValue);

子组件:

{{childValue}}

<input type=“button” value=“点击触发” @click=“childClick”>

2、父组件

<child v-on:onChildByValue=“childByValue”>

父组件:

{{name}}