图片.png
eg:
item.vue
<template>
<div :class="['todo-item', todo.complated ? 'complated' : '']">
<input
type="checkbox"
class="toggle"
v-model="todo.completed"
>
<label>{{ todo.content }}</label>
<button class="destory" @click="deleteTodo"></button>
</div>
</template>
<script>
export default{
props: {
todo: {
type: Object,
required: true,
}
},
methods: {
deleteTodo: function () {
}
}
}
</script>
<style scoped>
</style>
todo.vue
<script>
import Item from './item.vue'
export default{
data(){
return {msg: 'hello vue'}
},
components: { // 注册Item组件为自己的组件
Item,
},
methods: {
addTodo() {
}
}
}
</script>
todo.vue包含item组件为嵌套组件。
