chevron_left

Vue 2 实践教程
免费
第 3.2 回

教程文档

Vue 2 实践教程 - 通过 Prop 向子组件传递数据

2023年11月23日
Vue 2 实践教程

通过 Prop 向子组件传递数据

传递静态值到子组件

父组件

<template>
  <div>
    <!-- 传递 name 到子组件 -->
    <Child name="Aaron"/>
    <Child name="Pipi"/>
    <Child name="Daniel"/>
  </div>
</template>

<script>
import Child from '../components/Child'

export default {
  components: {Child},
  data() {
    return {}
  }
}
</script>

子组件

<template>
  <h2>hello, {{ name }}</h2>
</template>

<script>
export default {
  // 子组件中使用 props 接收
  props: ['name'],
}
</script>

![1.png](htt...

请登录后查看更多expand_more

课程介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

目录

适合这样的人

新手

授课老师