2024年最新vue保姆级教程----组件之间的参数传递，2024高级前端笔试总结

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

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

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

✨ 前言

随着移动互联网的发展,前端技术也日新月异。如今流行的前端框架层出不穷,从Angular、React到Vue,每个框架都有自己的特色。但是学习任何一种新框架和技术都需要Certain一个过程,那么我们应该如何快速地上手一项新技能呢?

本专栏将以Vue框架为例,分享作者在学习Vue过程中的一些心得与经验。文中将介绍:

• Vue的基本特性与发展历程
• 怎样快速学习Vue的基础语法
• 如何应用Vue开发常见的组件
• 一些提高Vue开发效率的技巧
• Vue生态系统中的常用工具及插件

通过阅读本文,希望可以帮助对Vue感兴趣但还没有实际使用经验的读者,快速地对Vue框架有一个整体的认识,并快速上手Vue进行实际项目的开发。与此同时,也欢迎有Vue使用经验的读者,分享你的学习经验与心得。

让我们开始Vue的学习与探索之旅吧!

✨ 实用示例

在Vue项目中,我们经常需要在组件之间传递数据。组件之间的数据传递主要有以下几种方式:

1. props和$emit

🔔 props

• 在子组件中使用 props 声明需要从父组件接收的数据:

export default {
  props: ['message'] 
}

• 子组件在模板中可以像使用 data 一样使用 props 的数据:

<p>{{ message }}</p>

• 父组件使用 v-bind 向子组件传递 props:

<ChildComponent :message="parentMessage" />

• props 有一些高级特性,如类型检查、默认值等:

props: {
  message: {
    type: String,
    default: 'default value' 
  }
}

🔔 $emit

• 子组件中通过 $emit 触发事件来通知父组件:

this.$emit('someEvent', 1, 2, 3)

• 父组件使用 v-on 监听子组件事件:

<ChildComponent v-on:someEvent="callback" />

• 回调函数接收子组件传递过来的额外参数:

methods: {
  callback(param1, param2, param3) {
    // ......
  }  
}

• 除了数据之外,也可以在 $emit 中传递事件对象:

this.$emit('click', e)

这样 props 和 $emit 就实现了父子组件之间的双向数据传递。可以根据需要灵活使用。

2. $parent 和 $children

🔔 $parent

1、在子组件中可以通过this.$parent访问父组件的实例。

2、子组件可以直接调用父组件的数据或方法:

this.$parent.parentData
this.$parent.parentMethod()

3、父组件也可以通过refs访问子组件实例:

<ChildComponent ref="child"/>

this.$refs.child.childData

4、需要注意$parent/$children时组件间的强耦合关系。

5、不要在模板或样式中直接访问$parent/$children。

🔔 $children

1、在父组件中通过this.$children访问子组件实例数组。

2、示例:

this.$children[0].childMethod()

3、常见场景是父组件遍历子组件:

this.$children.forEach(child => {
  // ...
})

4、$children需要注意子组件的顺序和数量变化。

5、也可以通过$refs直接获取子组件。

综上,$parent/$children可以快速访问组件实例,但也会产生强耦合,需谨慎使用。大多数场景还是推荐使用props/events的组件通信方式。

3. Provide/Inject

Provide/Inject API可以实现跨层级的参数传递。

我来对Vue中使用Provide/Inject实现跨组件层级传参的方法做一个更完善的说明:

1. Provide/Inject API属于Vue的依赖注入系统。
2. 使用步骤:

• 祖先组件中提供数据:

provide: {
  foo: 'foo value' 
}

• 子孙组件注入提供的数据:

inject: ['foo']

1. Provide的对象会向下合并到所有子孙组件中。
2. 注入的key需要与Provide的key保持一致。
3. Provide/Inject不受组件层级关系限制,可以实现跨级传递数据。
4. 注入的数据是非响应式的。
5. 常见场景是祖先组件提供共享数据或方法。
6. 使用好处是减少多级组件传递props的麻烦。
7. 注意Provide/Inject会使组件间的关系不明显,Maintenance困难。
8. 推荐仅在有明确需求时才使用,而不是滥用该API。

综上,Provide/Inject可以实现Vue组件深层级的传参,但也有Maintenance上的隐患,需要谨慎使用。大多数场景还是推荐使用props、events等方式实现组件通信。

4. Vuex

最后更多分享：前端字节跳动真题解析

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

• 

ovide/Inject可以实现Vue组件深层级的传参,但也有Maintenance上的隐患,需要谨慎使用。大多数场景还是推荐使用props、events等方式实现组件通信。

4. Vuex

最后更多分享：前端字节跳动真题解析

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

• [外链图片转存中…(img-uPwSJRlf-1715102747010)]