Code Monkey home page Code Monkey logo

vue-2-3's Issues

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

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);
    }
}

Mixins are invalid

vue2 mixins
test.js

export default {
  name: 'Test',
  components: {},
  data() {
    return {
      unit: 'testUnit'
    }
  },
  beforeDestroy() {
    console.log('vue2-beforeDestroy-mi')
  },
  destroyed() {
    console.log('vue2-destroyed-mi')
  },
  methods: {
    test() {
      console.log('testUnit')
    }
  }
}

vue2 components

<script>
import test from '@/mixins/test'
export default {
  name: 'HelloWorld',
  mixins:[test],
  props: {
    // msg: String,
  },
  render: (h) => {
    return h('div',{
      props: {
        value: '222',
      }, 
      style: {
        width: '100%',
      }, 
      on: {
        click: () => {
          console.log('click');
        },
      },
    },'This is  render examples', );
  },
  data() {
    return {
      modalOpen: false,
    };
  },
  beforeDestroy() {
    console.log('vue2-beforeDestroy')
  },
  destroyed() {
    console.log('vue2-destroyed')
  },
  mounted() {
    console.log('mounted', this);
  },
  methods: {
    test() {
      console.log('test');
    },
  },
};
</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>

vue3 use

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

<script>
import toVue3 from 'vue-2-3/to-vue-3';
import Vue2 from 'vue2';
import * as Vue3 from 'vue/dist/vue.esm-bundler.js';
toVue3.register(Vue2, Vue3);
import HelloWorld from '../../../vue-test-2/src/components/HelloWorld'
let hello = toVue3(HelloWorld)
export default {
  name: 'Home',
  components: {
    HelloWorld:hello,
  },
  methods: {},
};
</script>

feat: global component registration

when I use the component like this

// app.vue
<mp-block>
  <Test />
</mp-block>
// test.vue
<template>
  <mp-button>111</mp-button>
</template>

it didn't show normal and has warning that Failed to resolve component: mp-button , while I try to console.log(this) in test.vue, it show that it didn't register any components
image

while I try console.log(app) in main.js , it seems normal, what happen???
image

is Support vite?

in vite

import xxx from 'moduleComponent'

Component

moduleComponent

import C1 from './inner/C1'
import C2 from './inner/C2'
import C3 from './inner/C3'

The component path needs to be add extension changed to import C1 from './inner/C1.vue'

It is currently reporting a path not found

Error in render: "TypeError: Cannot read property '1' of undefined"

vue2 components

<template>
  <div>
    <button @click="test()">
      Open full screen modal! (With teleport!)
    </button>
  </div>
</template>

vue3 use

import toVue3 from 'vue-2-3/to-vue-3';
import Vue2 from 'vue2';
import * as Vue3 from 'vue';

toVue3.register(Vue2, Vue3);
import HelloWorld from '../../../vue-test-2/src/components/HelloWorld'
let hello = toVue3(HelloWorld)
export default {
  name: 'Home',
  components: {
    HelloWorld:hello
  }
}

dom
image

error
image

version
win10 x64
vue@^3.0.2
vue@^2.6.12

How would one use this to support a published Vue 2 component?

So we have a published component before, and we do this to publish

vue-cli-service build --target lib --dest dist/lib --name VueComponentName 'src/components/VueComponentName.vue'

Our main.js file is like this:

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Just a default main.js file.

Where's the best place to interop the component so when users install it in their Vue 3 app, it will just work without doing interop themselves?

What I mean is they don't have to install vue-2-3 and do themselves this:

import toVue3 from 'vue-2-3/to-vue-3';
import VueComponentName from './VueComponentName';

export default {
    components: {
        VueComponentName: toVue3(VueComponentName)
    }
}

Thank you.

$slots is not found

while I use toVue3 to convert my vue2 components, I can't get this.$slots as normal
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.