vue2父子组件传值

在Vue中，父子组件之间有多种方式可以进行数据的传递。以下是两种常见的父子组件传值方式的详细代码和讲解：

1. 使用props进行属性传递：

   • 父组件通过在子组件标签上绑定属性，将数据传递给子组件。
   • 子组件通过在props对象中定义属性来接收父组件传递的属性，并在组件内部使用。

   父组件：

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

   子组件：

   <template>
     <div>
       <p>{{ childData }}</p>
     </div>
   </template>
   
   <script>
   export default {
     props: {
       childData: {
         type: String,
         required: true
       }
     }
   }
   </script>
   

2. 使用$emit触发自定义事件进行数据传递：

   • 子组件通过$emit方法触发一个自定义事件，并携带需要传递的数据。
   • 父组件在使用子组件时，可以在子组件标签上绑定自定义事件的处理函数，并在处理函数中获取子组件传递过来的数据。

   父组件：

   <template>
     <div>
       <child-component @myevent="handleEvent"></child-component>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     methods: {
       handleEvent(data) {
         console.log(data); // 输出：Hello World
       }
     }
   }
   </script>
   

   子组件：

   <template>
     <div>
       <button @click="handleClick">点击我</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       handleClick() {
         this.$emit('myevent', 'Hello World');
       }
     }
   }
   </script>
   

在面试中，你可以使用以上代码示例，并详细解释props和$emit的原理和实现方式。强调父组件通过修改props的属性值或监听子组件的自定义事件，实现与子组件的数据传递和通信。

希望以上信息对你有帮助！如果还有其他问题，请随时提问。祝你面试顺利！