Vue：无法将值从父组件传递给子组件

Question

Hi I was learning vue and I am trying to make a todo app, I cannot show the todo list items in my todo app, I can't figure out what is the problem is. This is my App.vue :

<template>
  <TodoList id="app" v-bind:todos="todos" />
</template>

<script>
import TodoList from './components/list.vue';

export default {
  name: 'App',
  data() {
    return {
      todos: [
        {
          id: 1,
          title: 'Go workout',
          completed: false
        },
        {
          id: 2,
          title: 'Do laundry',
          completed: false
        },
        {
          id: 3,
          title: 'Cook food',
          completed: false
        }
      ]
    };
  },
  components: {
    TodoList
  }
};
</script>

This is my list.vue :

<template>
  <div>
    <h2>Todo List</h2>
    <ul>
      <li v-bind:key="todo.id" v-for="todo in todos">
        <Todo v-bind:todo="todo" />
      </li>
    </ul>
  </div>
</template>

<script>
import Todo from './todo.vue';

export default {
  name: 'TodoList',
  components: {
    Todo
  },
  created() {
    console.log(this);
  }
};
</script>

This component contains the Todo item, this is todo.js :

<template>
  <div>{{ todo.title }}</div>
</template>

<script>
export default {
  name: 'Todo',
  props: ['todo'],
  created() {
    console.log('todo', this);
  }
};
</script>

But todo is probably not being created, as the created lifecycle is not being called here. Help me figure what is the problem is.

Answer 1

You forgot the props attribute in your TodoList component:

export default {
  name: 'TodoList',
  props: ['todos'],
  components: {
    Todo
  },
  created() {
    console.log(this);
  }
};