vue2父子组件传值

在Vue 2中，父子组件之间的数据传递是双向的，主要通过props（属性）和$emit（事件）来实现。以下是一些常见的父子组件传值方法：

1. **Props（属性）**:
- **单向数据流**：父组件向子组件传递数据使用`props`。父组件定义props时，需要指定类型，子组件通过`props`接收数据。例如：

   // 父组件
   <child-component :value="parentValue" />

   // 子组件
   props: {
     value: {
       type: String,
       default: ''
     }
   }

子组件只能读取props，不能修改，除非父组件通过$emit触发自定义事件。

2. **自定义事件（$emit）**:
- **父子组件间的双向通信**：如果需要子组件向父组件发送更新，可以使用$emit触发一个自定义事件，如：

   // 子组件
   this.$emit('update-value', newValue);

   // 父组件
   <child-component @update-value="handleChildValueChange" />
   methods: {
     handleChildValueChange(value) {
       this.parentValue = value;
     }
   }

3. **引用类型（Object/Array）**:
- 如果父组件想传递对象或数组，Vue会默认浅复制。若需要深拷贝，需在子组件中处理，例如使用`Vue.extend`或`JSON.parse(JSON.stringify())`。

4. **自定义指令（v-bind、v-on）**:
- 可以使用自定义指令如`v-model`在组件间共享数据，但这在Vue 2中不是推荐的做法，因为可能会带来性能问题。

5. **$parent/$children/$refs**:
- 有时可能需要直接访问父组件或子组件的实例，这时可以使用`$parent`、`$children`和`$refs`。但这些选项通常不鼓励滥用，因为它们破坏了组件的封装性。