Examples https://vuejs.org/examples/#simple-component
페이지 정보
본문
https://vuejs.org/examples/#simple-component
---------------------------
<!--
Here we show the simplest possible component which accepts a prop and renders it.
Learn more about components in the guide!
-->
<script>
import TodoItem from './TodoItem.vue'
export default {
components: {
TodoItem
},
data() {
return {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
}
}
</script>
<template>
<ol>
<!--
We are providing 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 is explained in the guide section on v-for.
-->
<TodoItem
v-for="item in groceryList"
:todo="item"
:key="item.id"
></TodoItem>
</ol>
</template>
---------------------------
TodoItem.vue
<script>
export default {
props: {
todo: Object
}
}
</script>
<template>
<li>{{ todo.text }}</li>
</template>