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

<template>
<text> {{item.id}}. {{item.text}} </text>
</template>
<script>
export default {
props: {
item: {
Type: Object
}
}
};
</script>

create another .vue file and import the above todoItem components

<template>
<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.
-->
<todo-item
class="text-container"
v-for="todo in todos"
:key="todo.text"
:item="todo"
/>
</view>
</template>
<script>
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" }
]
};
}
};
</script>
<style>
.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;
}
</style>




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:

<view>
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</view>