📢 鸿蒙专栏：想学鸿蒙的，冲
📢 C语言专栏：想学C语言的，冲
📢 VUE专栏：想学VUE的，冲这里
📢 CSS专栏：想学CSS的，冲这里
📢 Krpano专栏：想学VUE的，冲这里
🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！
文章目录
✨ 前言
✨ 实用示例
1. props和$emit
🔔 props
🔔 $emit
2. $parent 和 $children
🔔 $parent
🔔 $children
3. Provide/Inject
4. Vuex
✨ 结语
✨ 前言
随着移动互联网的发展,前端技术也日新月异。如今流行的前端框架层出不穷,从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.childData4、需要注意$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实现跨组件层级传参的方法做一个更完善的说明:
- Provide/Inject API属于Vue的依赖注入系统。
- 使用步骤:
-
祖先组件中提供数据:
provide: { foo: 'foo value' } -
子孙组件注入提供的数据:
inject: ['foo']
- Provide的对象会向下合并到所有子孙组件中。
- 注入的key需要与Provide的key保持一致。
- Provide/Inject不受组件层级关系限制,可以实现跨级传递数据。
- 注入的数据是非响应式的。
- 常见场景是祖先组件提供共享数据或方法。
- 使用好处是减少多级组件传递props的麻烦。
- 注意Provide/Inject会使组件间的关系不明显,Maintenance困难。
- 推荐仅在有明确需求时才使用,而不是滥用该API。
综上,Provide/Inject可以实现Vue组件深层级的传参,但也有Maintenance上的隐患,需要谨慎使用。大多数场景还是推荐使用props、events等方式实现组件通信。
4. Vuex
Vuex是Vue的状态管理库,可以实现跨组件数据共享。
1、在组件中可以通过this.$store访问到Vuex的store实例。
2、获取state中的数据:
this.$store.state.count3、调用mutations修改state:
this.$store.commit('increment')4、调用actions进行异步操作:
this.$store.dispatch('asyncIncrement')5、mapState/mapMutations/mapActions可以将store映射到计算属性/方法:
computed: mapState(['count'])
methods: mapMutations(['increment'])6、组件内getters访问:
this.$store.getters.doneTodos7、组件间通信- 通过mutations和actions进行事件分发。
8、Vuex适合于将共享状态抽取到store,实现组件间数据交互。
9、注意划分好状态变更的mutations和处理逻辑的actions。
10、使用Vuex需要考虑代码Maintenance成本,是否值得store管理。
综上,Vuex为组件通信提供了一个全局事件总线,可以用来维护和传递共享状态,但也要考虑合理的使用场景。
✨ 结语
经过上述的讲解,我们了解了Vue组件之间的几种常用数据传递方式:props/$emit、$parent/$children、Provide/Inject、Vuex等。Props和events可以实现父子组件的定向传参;Vuex提供了一个全局状态管理;Provide/Inject实现跨层级注入;$parent/$children访问可能造成组件强耦合。
不同的场景需要选择合适的传递方式。简单的父子组件通信可以使用props/events;复杂的大型应用可以使用Vuex进行状态管理;如果需要跨多层级传递参数,则可以采用Provide/Inject等方式。
学习一个技术离不开理论指导,但更需要项目实践。建议大家在学习Vue组件间通信理论后,充分运用不同的传参方式,完成一些实际的功能模块。在不断的实践中思考不同方式的优劣,才能深入地掌握Vue组件间的交互模式。
本文内容仅涵盖了Vue组件通信的基础用法,相关技术还在不断发展中。希望这篇文章能作为一个入门指引,帮助大家快速上手Vue组件间的参数传递。让我们持续地学习与实践,在开发中不断优化和提高。
我们改日再会
