new project

npm init vue@latest

mixin

minxin可用于全部组件调用，类似php的interface。包含生命周期以及data、method等。如果组件中存在于mixin相中内容，则会被组件的覆盖。
可参考 官网 (opens new window)
建立相关minxin文件。

点击查看

const mixins = {
  data() {
		return {
			_uid: this._uid,
		};
	},
  onLoad() {
		
	},
	onShow() {
  },
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}

export default mixins

main.js 文件中全局注册

点击查看

import App from './App'
import mixins from '@/ui/js/mixin.js'

// VUE 3
import { createApp } from 'vue'
export function createApp() {
  const app = createApp(App)
  app.mixin(mixins)
  return {
    app
  }
}

组件中直接使用对应的 method

点击查看

<script>
	var _this = null;
	export default {
		data() {
			return {};
		},
		onLoad() {
			_this = this;
		},
		onReady() {
			setTimeout(()=>{
				_this.hello()
			},1500)
		},
		methods: {
			
		}
	};
</script>

prototype

可参考 官网 (opens new window)

import App from './App'
import { createSSRApp } from 'vue'


const app = createSSRApp(App)

 app.config.globalProperties.$util = util;