Closed nuochong closed 3 years ago
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>
vue2 mixins test.js
vue2 components
vue3 use