Open nuochong opened 3 years ago
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); } }
Tried reproducing this and it seems to work fine here.
Can you reproduce the error on CodePen or a minimal repro repo?
vue2
vue3 components
version win10 x64 vue@^3.0.2 vue@^2.6.12
vue-2-3/src/to-vue-2 about fragment
vue3 about fragment