在Vue中，父子组件之间的传值主要通过props和事件（$emit）来实现。
父组件向子组件传值：
在父组件中，你可以通过在子组件标签上添加自定义属性（即props）来传递数据给子组件。然后在子组件中，你可以通过this.$props或者直接在模板中使用这些props来访问这些数据。
下面是一个简单的例子：
父组件：
<template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent!' } } } </script>
子组件：
<template> <div>{{ message }}</div> </template> <script> export default { props: { message: String } } </script>
在这个例子中，父组件将parentMessage这个数据通过:message这个prop传递给了子组件。子组件通过props选项声明了message这个prop，然后在模板中直接使用{{ message }}来显示这个数据。
子组件向父组件传值：
子组件可以通过触发事件（$emit）来向父组件传递数据。父组件可以通过监听这个事件来获取子组件传递的数据。
下面是一个简单的例子：
子组件：
<template> <button @click="notifyParent">Notify Parent</button> </template> <script> export default { methods: { notifyParent() { this.$emit('childEvent', 'Hello from child!'); } } } </script>
父组件：
<template> <div> <child-component @childEvent="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, methods: { handleChildEvent(message) { console.log(message); // 输出 'Hello from child!' } } } </script>
在这个例子中，子组件有一个按钮，当点击这个按钮时，会触发notifyParent这个方法。这个方法通过this.$emit触发了一个名为childEvent的事件，并传递了一个字符串'Hello from child!'作为参数。父组件通过@childEvent监听了这个事件，并定义了一个handleChildEvent方法来处理这个事件。当子组件触发childEvent事件时，父组件的handleChildEvent方法就会被调用，并接收到子组件传递的数据。
