关于vnode子父组件使用自定义指令实现v-model双向绑定

父.vue

<template>
  <div class="zi-ding-yi">
    自定义组件测试
    <zidingyizujian v-comModel="pageValue"></zidingyizujian>
    <input type="text" v-model="pageValue" />
  </div>
</template>

<script>
import zidingyizujian from './zidingyizujian.vue';
export default {
  name: 'zidingyi',
  components: {
    zidingyizujian,
  },
  data() {
    return {
      pageValue: '这是页面的v-model',
    };
  },
  directives: {
    comModel: {
      // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
      bind: function (el, binding, vnode, oldVnode) {},
      //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
      inserted: function (el, binding, vnode, oldVnode) {
        console.log(el, 'el');
        console.log(binding, 'binding');
        console.log(vnode, 'vnode');
        console.log(oldVnode, 'oldVnode');
        let input = el.getElementsByTagName('input')[0];
        input.oninput = (e) => {
          let value = e.target.value;
          // vnode.context[binding.expression] = value;
          vnode.context[binding.expression] = value;
          console.log('gan');
          console.log('insert中的binding:', binding.value);
          console.log('binding-value: ', binding.value);
        };
      },
      //所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
      //但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
      update: function (el, binding, vnode, oldVnode) {
        let input = el.getElementsByTagName('input')[0];
        console.log(binding.value, input.value);

        input.value = binding.value;
      },
      //指令所在组件的 VNode 及其子 VNode 全部更新后调用。
      componentUpdated: function () {},
      //只调用一次，指令与元素解绑时调用。
      unbind: function () {},
    },
  },
};
</script>

<style>
</style>

子组件.vue

<template>
  <div class="zi-ding-yi-zujian">
      我是个很牛的input
      <input  type="text" v-model="value">
  </div>
</template>

<script>
export default {
    data(){
        return{
            value:'很牛的v-model'
        }
    }
}
</script>

文章内容参考：卡乐C前端