Vue组件传值方式详解及示例代码

在Vue开发中，组件间的数据传递是非常常见的需求。Vue提供了多种方式来实现组件间的数据传递，下面将详细介绍这些方式，并提供相应的示例代码。

1. 父子组件传值（Props）
   Vue中最常用的组件传值方式是通过Props属性实现父子组件之间的数据传递。父组件可以通过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>
       <p>{
       { message }}</p>