Props

main Documentación oficial Licencia MITDescargado el 2026-08-02

Props#

A child component can accept input from the parent via props. First, it needs to declare the props it accepts:

```vue [ChildComp.vue]

Note `defineProps()` is a compile-time macro and doesn't need to be imported. Once declared, the `msg` prop can be used in the child component's template. It can also be accessed in JavaScript via the returned object of `defineProps()`.

</div>

<div class="html">

```js
// in child component
export default {
  props: {
    msg: String
  },
  setup(props) {
    // access props.msg
  }
}

Once declared, the `msg` prop is exposed on `this` and can be used in the child component's template. The received props are passed to `setup()` as the first argument.

// in child component
export default {
  props: {
    msg: String
  }
}

Once declared, the `msg` prop is exposed on `this` and can be used in the child component's template.

The parent can pass the prop to the child just like attributes. To pass a dynamic value, we can also use the v-bind syntax:

<ChildComp :msg="greeting" />

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

Now try it yourself in the editor.