超简单易懂的vue组件传值

2022-04-01

目录

前言
实现思路
实例1：父传子
实例2：子传父
总结

前言

vue中的组件传值大家应该都不陌生，今天用两个简单易懂的小案例教大家在项目中如何使用父传子、子传父组件之间的数据传递。

实现思路

父传子：在父组件中给子组件标签上绑定一个属性，属性上挂载需要传递的值，在子组件通过 props:['自定义属性名'] 来接收数据。
子传父：在子组件中自定义一个事件，调用这个事件后，子组件通过 this.$emit('自定义事件名',要传递的数据) 发送父组件可以监听的数据，最后父组件监听子组件事件，调用事件并接收传递过来的数据。

话不多说，下面进入实战

实例1：父传子本篇小实例主要是模拟父组件向不同子组件传递不同数据的情况。
父组件 index.vue

子组件1 seed.vue

子组件2 sons.vue

实现效果

1. 当 typeCode 为 “0” 时，页面内容如下：

文章图片

2. 当 typeCode 为 “1” 时，页面内容如下：

文章图片

实例2：子传父本篇小实例主要是模拟不同子组件向父组件传递数据的情况。
seed.vue 子组件1

sons.vue 子组件2

index.vue 父组件

实现效果

1. 当 typeCode 为 “0” 时，页面内容如下：

文章图片

2. 当 typeCode 为 “1” 时，页面内容如下：

文章图片

总结 【超简单易懂的vue组件传值】本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

推荐阅读

上一篇：C语言宏定义#define的使用

下一篇：JS实现玩转风车