面试题：Angular自定义指令如何与父组件进行双向数据绑定

Question

假设你正在开发一个自定义指令，需要实现该指令与父组件之间的双向数据绑定，详细阐述实现思路，并给出主要的代码片段，包括指令类和父组件模板中的相关代码。

Answer 1

实现思路

1. 定义指令：在Vue.js中，使用Vue.directive方法定义一个自定义指令。
2. 双向数据绑定：通过Object.defineProperty方法对绑定值进行劫持，当值发生变化时，更新父组件的数据；同时，在指令的update钩子函数中，当父组件数据变化时，更新指令绑定的元素。

指令类代码

Vue.directive('custom-model', {
  bind: function (el, binding) {
    Object.defineProperty(el, 'value', {
      get: function () {
        return binding.value;
      },
      set: function (newValue) {
        binding.value = newValue;
        const event = new Event('input');
        el.dispatchEvent(event);
      }
    });
    el.addEventListener('input', function () {
      binding.value = el.value;
    });
  },
  update: function (el, binding) {
    el.value = binding.value;
  }
});

父组件模板代码

<template>
  <div>
    <input v-custom-model="parentData" type="text">
    <p>父组件数据: {{ parentData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentData: ''
    };
  }
};
</script>