教程：第 12 步

Vue教程

Props {#props}

子组件可以通过 props 从父组件接受动态数据。首先，需要声明它所接受的 props：

vue [ChildComp.vue] 复制代码

注意 defineProps() 是一个编译时宏，并不需要导入。一旦声明，msg prop 就可以在子组件的模板中使用。它也可以通过 defineProps() 所返回的对象在 JavaScript 中访问。

js 复制代码

// 在子组件中
export default {
  props: {
    msg: String
  },
  setup(props) {
    // 访问 props.msg
  }
}

一旦声明，msg prop 就会暴露在 this 上，并可以在子组件的模板中使用。接收到的 props 会作为第一个参数传递给 setup()。

js 复制代码

// 在子组件中
export default {
  props: {
    msg: String
  }
}

一旦声明，msg prop 就会暴露在 this 上，并可以在子组件的模板中使用。

父组件可以像声明 HTML attributes 一样传递 props。若要传递动态值，也可以使用 v-bind 语法：

vue-html 复制代码

<ChildComp :msg="greeting" />

vue-html 复制代码

<child-comp :msg="greeting"></child-comp>

现在在编辑器中自己尝试一下吧。

发现翻译问题或内容错误？请告诉我们。