Vue定义和使用插件

插件是对vue的增强

1. 定义插件
   【新建一个plugins.js文件，Vue会自动调用install方法，第一个参数为Vue构造函数，第二个参数之后可以自定义传入参数】

   export default {
   	install(Vue, x, y, z) {
   		console.log('Vue调用了install方法，自定义传入的参数为' + x, y, z);
   		Vue.filter('addChar', function (value, str = '#') {
               return str + value;
           });
   		Vue.directive('focus-bind', {
               bind(element, binding) { // 指令与节点绑定成功时
                   element.value = binding.value;
               },
               inserted(element) { // 绑定指令的这个节点被渲染到页面上时
                   element.focus();
               },
               update(element, binding) {  // 指令所在的模板被重新解析时
                   element.value = binding.value;
               }
           });
   		Vue.mixin({
               data() {
                   return {
                       a: 1,
                       b: 2
                   }
               }
           });
   		// ......
   	}
   }
   

2. 引入插件
   【在main.js中引入插件即可】

   import Vue from 'vue';
   import App from './App.vue'
   import plugins from '@/plugins.js';
   // Vue.use(plugins, 'a', 'b', 'c'); // 可传入额外的参数
   Vue.use(plugins); // 也可不传参数
   new Vue({
   	render: h => h(App)
   }).$mount('#app');
   

3. 使用插件中的功能

   <template>
   	<div>
   		<input type="text" v-focus-bind="txt">
   		<p>名称：{{name | addChar}}</p>
   	</div>
   </template>
   <script>
   	export default {
   		data() {
   			return {
   				name: 'wuwu'
   			}
   		}
   	}
   </script>