前言
本文讲解两个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
值来实现
全剧终