Vue中组件传值的方法总结

在 Vue 中，组件之间的数据传递是常见的需求。以下是常用的组件传值方法：

1. props

   使用 props 可以从父组件向子组件传递数据，通过在子组件中定义 props 属性来接收父组件传递的数据。

   <!-- ParentComponent.vue -->
   <template>
     <ChildComponent :message="parentMessage" />
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent,
     },
     data() {
       return {
         parentMessage: 'Hello from parent!',
       };
     },
   };
   </script>

   <!-- ChildComponent.vue -->
   <template>
     <p>{{ message }}</p>
   </template>
   
   <script>
   export default {
     props: ['message'],
   };
   </script>

2. $emit

   子组件可以通过$emit 触发一个自定义事件，并将数据传递给父组件。

   <!-- ChildComponent.vue -->
   <template>
     <button @click="sendMessageToParent">Send Message to Parent</button>
   </template>
   
   <script>
   export default {
     methods: {
       sendMessageToParent() {
         this.$emit('message-to-parent', 'Hello from child!');
       },
     },
   };
   </script>

   <!-- ParentComponent.vue -->
   <template>
     <ChildComponent @message-to-parent="handleMessageFromChild" />
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent,
     },
     methods: {
       handleMessageFromChild(message) {
         console.log(message);
       },
     },
   };
   </script>

3. provide/inject

   使用 provide/inject 可以在祖先组件提供数据，然后在子孙组件中注入获取数据。

   <!-- AncestorComponent.vue -->
   <script>
   export default {
     provide: {
       sharedData: 'Hello from ancestor!',
     },
   };
   </script>

   <!-- DescendantComponent.vue -->
   <template>
     <p>{{ sharedData }}</p>
   </template>
   
   <script>
   export default {
     inject: ['sharedData'],
   };
   </script>

这些方法提供了灵活的方式来在 Vue 组件之间进行数据传递，开发者可以根据具体场景选择合适的方式进行组件间数据传递。