Vue中如何给组件传递数据；利用props给Vue组件传递数据的三种方法；如何修改传递给Vue组件的数据的值

前言

本文讲解两个Vue的知识点：

• 给Vue组件传递数据的3种办法
• 如何修改传递给Vue组件数据的值

---

给Vue组件传递数据的3种办法

• 在组件中利用数组简单声明接收（常用）
• 在组件中利用对象接收数据（2种比较高级的办法）

1. 在组件中利用数组简单声明接收

在组件中，通过props:['name','age','gender']的方式接收需要从外部传递进来的字段

在App.vue 中的写法（传递数据给组件）：

2.利用对象的方式限制传递的数据类型

⚠️ 下面展示传递错误的数据类型 ❌

橙色方框内的传递方式，会被vue当成字符串处理，并不是Number类型的，绿色方框利用:age="19" 传递的数据，双引号中的19被认为是JS命令传递，类型可以被Vue认为是Number类型
在页面中，虽然能将传递的数据展示到页面上，但控制台会因为传递类型错误报错。

3. 利用对象的方式限制传递的数据类型+默认值的指定+必要性的限制

在App.vue 中的写法（传递数据给组件）：

页面展示：

如何修改传递给Vue组件的数据的值

在Vue中这种做法是不允许的 ❎，这意味着我们没办法直接修改传递进组件的数据。

⚠️ 下面展示传递错误的写法 ❌

如果我们非要这么做，页面确实会展示+1后的数据，但控制台会报错。

✅ 正确的写法是需要有一个中间变量myAge接收age值，通过修改myAge值来实现

全剧终