Other

{{ property }}

Render dynamic text based on the value of property

ref="name"

Template ref: a reference to an element in the template

this.$refs.name

element will be exposed there
Note: only accessible after the component is mounted

<childComp/> or <childComp>slot content</childComp>

Render child component

<childComp :childProp="dataProp"/>

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 @eventName=(arg) => parentProp = arg"/>

Parent can listen to child-emitted events using v-on

In child template: <slot/> or <slot> fallback content </slot>

Parent can pass down template fragments to the child

<slot name='name'></slot>
In parent: <template v-slot:name> content </template>

Specify a name to the slot.
By default, the name is 'default'