Vue - 嵌套组件（Nested Component）

图片.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组件为嵌套组件。