2024年最新Vue2(14)，2024年最新Web前端面试题整理最新

最后

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

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

• 父传子
• 子传父
• 非父子传值

---

引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

接下来，我们通过实例来看可能会更明白一些：

1. 父组件向子组件进行传值

父组件：

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
 import child from './child'
 export default {
 components: {
 child
 },
 data () {
 return {
 name: ''
 }
 }
 }
</script>

子组件：

<template>
 <div>
 子组件:
 <span>{{inputName}}</span>
 </div>
</template>
<script>
 export default {
 // 接受父组件的值
 props: {
 inputName: String,
 required: true
 }
 }
</script>

2. 子组件向父组件传值

子组件：

<template>
 <div>
 子组件:
 <span>{{childValue}}</span>
 <!-- 定义一个子组件传值的方法 -->
 <input type="button" value="点击触发" @click="childClick">
 </div>
</template>
<script>
 export default {
 data () {
 return {
 childValue: '我是子组件的数据'
 }
 },
 methods: {
 childClick () {
 // childByValue是在父组件on监听的方法
 // 第二个参数this.childValue是需要传的值
 this.$emit('childByValue', this.childValue)
 }
 }
 }
</script>

父组件：

<template>
 <div>
 父组件:
 <span>{{name}}</span>
 <br>
 <br>
 <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
 <child v-on:childByValue="childByValue"></child>
 </div>
</template>
<script>
 import child from './child'
 export default {
 components: {
 child
 },
 data () {
 return {
 name: ''
 }
 },
 methods: {
 childByValue: function (childValue) {
 // childValue就是子组件传过来的值
 this.name = childValue
 }
 }
 }
</script>

3. 非父子组件进行传值

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

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

解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**