Vue-11-前端框架Vue之应用基础父组件传值到子组件props的使用
文章目录
- 1 父组件传值到子组件
- 1.1 App.vue(父组件)
- 1.2 Person.vue(子组件)
- 2 传值且保存
- 2.1 App.vue
- 2.2 Person.vue
- 2.2.1 原始写法
- 2.2.2 美观写法
- 3 列表传成数值(误传)
- 3.1 App.vue
- 3.2 Person.vue
- 3.3 限制类型(Person.vue)
- 3.4 限制必要性
- 3.4.1 App.vue
- 3.4.2 person.vue
- 3.5 限制默认值
- 3.5.1 App.vue
- 3.5.2 Person.vue
- 4 types/index.ts
1 父组件传值到子组件
在Vue 3中，props是用于父组件向子组件传递数据的重要机制。
通过props，你可以让组件更加灵活和可复用。
在父组件中的子组件标签中使用 :a=“a”（简写自v-bind:a=“a”）将数据传递给子组件。
如果你想传递字符串常量而不是变量，可以直接写成 a=“hello”，但注意这会传递字符串 “hello” 而不是变量。
1.1 App.vue(父组件)
组件标签中，添加一个属性a。
<template><Person a="嘿嘿"/>
</template