privatenumber / vue-2-3

↔️ Interop Vue 2 components in Vue 3 apps and vice versa
MIT License
284 stars 10 forks source link

Error in mounted hook: "TypeError: selfHook.bind is not a function" #5

Open nuochong opened 3 years ago

nuochong commented 3 years ago

image

image

vue2

<template>
  <div class="home">
    <hello-world></hello-world>
  </div>
</template>

<script>
import toVue2 from 'vue-2-3/src/to-vue-2';
import Vue2 from 'vue2/dist/vue.esm.browser.js';
import * as Vue3 from 'vue3/dist/vue.esm-browser.js';
toVue2.register(Vue2,Vue3);
import HelloWorld from '../../../vue-test-3/src/components/HelloWorld'
let hello = toVue2(HelloWorld)

export default {
  name: 'Home',
  components: {
    HelloWorld:hello
  }
}
</script>

vue3 components

<script>
import { h } from 'vue3';
export default {
  name: 'HelloWorld',
  props: {
    // msg: String,
  },
  data() {
    return {
      modalOpen: false,
    };
  },
  render() {
    return h(
      'div',
      {
        id: 'hello',
      },
      [h('span', 'world')]
    );
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  },
  mounted() {
    console.log('mounted');
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

version win10 x64 vue@^3.0.2 vue@^2.6.12

vue-2-3/src/to-vue-2 about fragment

const root = this.v3app.mount(vue3ProxyNode($el));

vue3 about fragment

function callSyncHook(name, type, options, instance, globalMixins) {
    callHookFromMixins(name, type, globalMixins, instance);
    const { extends: base, mixins } = options;
    if (base) {
        callHookFromExtends(name, type, base, instance);
    }
    if (mixins) {
        callHookFromMixins(name, type, mixins, instance);
    }
    const selfHook = options[name];
    if (selfHook) {
        callWithAsyncErrorHandling(selfHook.bind(instance.proxy), instance, type);
    }
}
privatenumber commented 3 years ago

Tried reproducing this and it seems to work fine here.

Can you reproduce the error on CodePen or a minimal repro repo?