创建一个名为 `TaskManager` 的主组件。在 `TaskManager` 组件中，创建两个子组件：`TaskList` 和 `TaskInput`，并实现值传递

在Vue.js中，我们可以创建一个名为`TaskManager`的主组件，其中包含`TaskList`和`TaskInput`这两个子组件，并通过props实现它们之间的值传递。这里是一个基本的例子：

**TaskManager.vue**

<template>
  <div>
    <task-input v-model="newTask" @submit-task="addTask"></task-input>
    <task-list :tasks="tasks"></task-list>
  </div>
</template>

<script>
import TaskInput from './components/TaskInput.vue';
import TaskList from './components/TaskList.vue';

export default {
  name: 'TaskManager',
  components: {
    TaskInput,
    TaskList
  },
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask(task) {
      // 新增任务到列表中
      this.tasks.push(task);
      // 清空输入框
      this.newTask = '';
    }
  }
};
</script>

**TaskInput.vue**

<template>
  <form @submit.prevent="submitTask">
    <input v-model="taskName" type="text" placeholder="添加任务...">
    <button type="submit">添加</button>
  </form>
</template>

<script>
export default {
  name: 'TaskInput',
  props: {
    submitTask: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      taskName: ''
    };
  },
  methods: {
    submitTask() {
      this.submitTask(this.taskName);
    }
  }
};
</script>

**TaskList.vue**

<template>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">{{ task }}</li>
  </ul>
</template>

<script>
export default {
  name: 'TaskList',
  props: {
    tasks: {
      type: Array,
      required: true
    }
  }
};
</script>

在这个例子中，`TaskInput`组件接受`submit-task`方法作为prop，当表单提交时，会调用此方法并将新输入的任务名称传递过去。`TaskManager`组件通过`v-model`将新的任务存储在`newTask`里，并在`addTask`方法中将新任务添加到`tasks`数组。`TaskList`组件通过props展示任务列表。