vue2 deep穿透

在 Vue 2 中，可以使用 `deep` 修饰符来实现深度穿透，即在组件的嵌套层级中传递数据。

当你在子组件中使用 `v-model` 绑定一个对象时，通过给 `v-model` 添加 `deep` 修饰符，可以使得在子组件中修改对象的属性时，能够触发父组件中对应属性的更新。

下面是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component v-model="data"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      data: {
        message: 'Hello',
      },
    };
  },
  components: {
    ChildComponent,
  },
};
</script>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <input v-model="localData.message">
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      localData: this.value,
    };
  },
  watch: {
    localData: {
      deep: true, // 添加 deep 修饰符
      handler(newVal) {
        this.$emit('input', newVal);
      },
    },
  },
};
</script>

在上述示例中，父组件中的 `data` 对象通过 `v-model` 绑定到了子组件的 `value` 属性上。子组件中的输入框通过 `v-model` 绑定到了 `localData.message` 上。当你在子组件中修改输入框的值时，会触发子组件的 `watch` 监听器，然后通过 `$emit` 方法将更新后的值传递回父组件，从而实现了深度穿透。