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

你可能感兴趣的:(Vue,前端框架,vue.js,javascript)