Composing with components

The component system is another important concept in Vue Native, because it’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:

Component Tree

In Vue Native, registering a component is straightforward, you can simply declare the component in the components property:

create a todoItem.vue file

<text> {{}}. {{item.text}} </text>
export default {
props: {
item: {
Type: Object

create another .vue file and import the above todoItem components

<view class="container">
Now we provide each todo-item with the todo object
it's representing, so that its content can be dynamic.
We also need to provide each component with a "key",
which will be explained later.
v-for="todo in todos"
import TodoItem from "./todoItem";
export default {
components: { TodoItem },
data: function() {
return {
todos: [
{ id: 1, text: "Learn JavaScript" },
{ id: 2, text: "Learn Vue" },
{ id: 3, text: "Build something awesome" }
.container {
background-color: white;
align-items: center;
justify-content: center;
flex: 1;
.text-container {
color: blue;
padding: 2;
font-size: 22;
.text-input-container {
width: 300;
height: 40;
font-size: 22;
border-color: gray;

This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our <todo-item> component with more complex template and logic without affecting the parent app.

In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components, but here’s an (imaginary) example of what an app’s template might look like with components: