vue中父组件给子组件传值和子组件给父组件传值的方式

在Vue中，父组件向子组件传递值的方式有两种：

1. 使用props：在子组件中定义props属性，然后在父组件中通过属性的方式将值传递给子组件。例如：

父组件：

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

子组件：

   <template>
     <div>
       <p>{{ message }}</p>
     </div>
   </template>
   
   <script>
   export default {
     props: ['message']
   }
   </script>

2. 使用$emit：在子组件中通过$emit方法触发一个自定义事件，并传递需要传递的值，然后在父组件中通过监听该事件来获取传递的值。例如：

父组件：

   <template>
     <div>
       <child-component @message-updated="handleMessageUpdated"></child-component>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         message: ''
       };
     },
     methods: {
       handleMessageUpdated(message) {
         this.message = message;
       }
     }
   }
   </script>

子组件：

   <template>
     <div>
       <button @click="updateMessage">Update Message</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       updateMessage() {
         this.$emit('message-updated', 'Hello from child!');
       }
     }
   }
   </script>

子组件向父组件传递值的方式也是通过$emit方法触发事件，然后在父组件中通过监听该事件来获取传递的值。