Communicating with components

A key aspect of components is that they are reusable, which is why we give them their own state to keep them independent from the rest of the app. However, we may still want to send in data, or send it out. Components have an interface for communicating with other parts of the app, which we will now explore.

Props

We can send data to a component through a custom HTML property know as a prop. We must also register this custom property in an array, props, in the component's configuration. In the following example, we've created a prop, title:

<div id="app">
  <my-component title="My component!"></my-component>
  <!-- Renders as <div>My component!</div> -->
</div>
<script>
  Vue.component('my-component', {
    template: '<div>{{ title }}</div>',
    props: ['title']
  });

  new Vue({
    el: '#app'
  });
</script>

A prop can be used just like any data property of the component: you can interpolate it...