vue保姆级教程----组件之间的参数传递

📢 鸿蒙专栏：想学鸿蒙的，冲

📢 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.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实现跨组件层级传参的方法做一个更完善的说明:

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.count

3、调用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.doneTodos

7、组件间通信- 通过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组件间的参数传递。让我们持续地学习与实践,在开发中不断优化和提高。

我们改日再会