Vue.use使用方法

  • 主要说明Vue原型上添加自定义的方法和变量
  • 同时也可以类似引入Ui组件库一样引入自己的插件或库(类似elementUi、axios等)
  • 涉及prototype、install,use等关键词

a.vue组件

<template>
  <div>{{msg}}</div>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'aaa页面模板'
      }
    }
  }
</script>

// alert.js 公共方法

import aaa from './components/a'
export default {
	install(Vue, options) {
	    Vue.prototype.$alert = function (){
	        alert('my is self fun');
	    };
	    Vue.prototype.$userName = function (){
	        alert('my name is self userName');
	    };
	    Vue.yjl = function() {
	    	alert('yjl')
	    };
	    Vue.component('Loading', aaa);
	}
}

// main.js 入口

Window.Vue = Vue;//挂载window
import alert from './alert'
Vue.use(alert);

// home.vue组件调用

<template>
  <div class="home">
   <button @click="addmain">测试</button>
   <Loading></Loading>
  </div>
</template>
<script>
export default {
  name: 'home',
  methods:{
  	addmain(){
  		console.log(Vue);
  		Vue.yjl();//静态调用
  		this.$alert();//实例化调用
		this.$userName();
  	}
  }
}
</script>

你可能感兴趣的:(es6,mpvue,js,vue)