在组件之间传递数据是使用Vue的基础之一，也是所有前端开发的基础。然而，当你开始使用一个框架时，你可能会感到困惑，想知道如何做到这一点。
当你使用Vue时，有几种不同的方式在组件之间分享数据。根据它们之间的关系，你可能需要使用几种不同的工具；最基本的工具是道具和事件。
在这篇博文中，我们将看看如何在Vue.js框架中使用props和事件。我们将学习如何在Vue中把数据从父代传到子代，反之亦然。在这篇文章结束时，你应该对Vue的组件间的数据共享有一个很好的理解。
你在从父代传递数据到子代吗？Props是你需要的工具
将数据从一个父组件传递给一个子组件是一个非常常见的情况。例如，假设你正在构建一个任务管理应用程序；你有一个Dashboard.vue组件来处理所有的数据。
在它里面，你想用一个特定的设计来呈现一个任务列表，你决定创建一个TaskItem.vue组件，你将用它来实现这个目的。你如何将数据从Dashboard.vue传递到TaskItem.vue？
在Vue中，道具被用来将数据从父组件传递给子组件。这与HTML元素中使用属性的方式类似。例如，我们可以像这样创建一个带有名为message的道具的组件：
<template>
<div>{{ task}}</div>
</template>
<script>
export default {
name: 'TaskItem',
props: {
task: String, // Required prop
}
}
</script>
然后我们可以在我们的父组件中使用这个组件，像这样：
<template>
<TaskItem v-for="task in tasks" v-bind:task="task" />
</template>
<script>
import TaskItem from './TaskItem.vue'
export default {
components: { TaskItem },
data () {
return {
tasks: [
"Task 1",
"Task 2",
"Task 3"
]
}
}
}
</script>
这将呈现三个任务项，每个任务项都有一个不同的消息。注意我们是如何使用v-bind属性来传递我们的道具的，所以TaskItem.vue的每次迭代也是动态的。
到目前为止都很好!现在让我们来看看我们如何使用事件将数据从子组件传回父组件。
从子组件到父组件的数据传递：使用事件
Vue中的事件是由Vue对象（this.$root）上的Event Bus实例发出的，它可以被你的应用程序中的任何组件访问。要监听一个事件，你需要在父组件上使用v-on指令，就像这样：
<template>
<div id="app">
<ChildComponent v-on:customEvent="handleEvent" />
</div>
</template>
只要我们的ChildComponent发出customEvent事件，我们脚本中的handleEvent方法就会被调用。
让我们来看看一个完整的例子。在这种情况下，我们将创建一个CreateTask.vue子组件，它将从用户那里得到一些输入，然后在一个事件中把它发送给我们的父组件：
<template>
<input type="text" v-model="task" />
<button @click="createTask">Create task</button>
</template>
<script>
export default {
name: "CreateTask",
data() {
return {
task: "",
};
},
methods: {
createTask() {
this.$emit("taskCreated", this.task);
},
},
};
</script>
然后，在我们的父组件中，我们可以添加以下代码，以便监听我们的事件并将这个新任务添加到我们的任务数组中：
<template>
<CreateTask @taskCreated="addTask" />
<TaskItem v-for="task in tasks" v-bind:task="task" />
</template>
<script>
import TaskItem from "./TaskItem.vue";
export default {
components: { TaskItem },
data() {
return {
tasks: ["Task 1", "Task 2", "Task 3"],
};
},
methods: {
addTask(e) {
this.tasks.push(e);
},
},
};
</script>
道具和事件是在Vue中使用组件的一个重要部分。在这篇博文中，我们已经学会了如何使用道具从父组件传递数据到子组件，以及如何使用Vue实例（$root）上发出的事件从子组件传递数据到父组件。通过了解这两种机制的工作原理，你就可以很好地利用Vue来构建复杂的应用程序了!
