Vue24-插件

Vue24-插件

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：

   对象.install = function (Vue, options) {
       // 1. 添加全局过滤器
       Vue.filter(....)
   
       // 2. 添加全局指令
       Vue.directive(....)
   
       // 3. 配置全局混入(合)
       Vue.mixin(....)
   
       // 4. 添加实例方法
       Vue.prototype.$myMethod = function () {...}
       Vue.prototype.$myProperty = xxxx
   }
   

   export default {
    install(Vue,x,y,z){
     console.log(x,y,z)
     //全局过滤器
     Vue.filter('mySlice',function(value){
      return value.slice(0,4)
     })
   
     //定义全局指令
     Vue.directive('fbind',{
      //指令与元素成功绑定时（一上来）
      bind(element,binding){
       element.value = binding.value
      },
      //指令所在元素被插入页面时
      inserted(element,binding){
       element.focus()
      },
      //指令所在的模板被重新解析时
      update(element,binding){
       element.value = binding.value
      }
     })
   
     //定义混入
     Vue.mixin({
      data() {
       return {
        x:100,
        y:200
       }
      },
     })
   
     //给Vue原型上添加一个方法（vm和vc就都能用了）
     Vue.prototype.hello = ()=>{alert('你好啊')}
    }
   }
   

4. 使用插件：Vue.use()

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false

//应用（使用）插件
Vue.use(plugins,1,2,3)
//创建vm
new Vue({
 el:'#app',
 render: h => h(App)
})

<template>
 <div>
  <h2>学生姓名：{{name}}</h2>
  <h2>学生性别：{{sex}}</h2>
  <input type="text" v-fbind:value="name">
 </div>
</template>

<script>
 export default {
  name:'Student',
  data() {
   return {
    name:'张三',
    sex:'男'
   }
  },
 }
</script>

<template>
 <div>
  <h2>学校名称：{{name | mySlice}}</h2>
  <h2>学校地址：{{address}}</h2>
  <button @click="test">点我测试一个hello方法</button>
 </div>
</template>

<script>
 export default {
  name:'School',
  data() {
   return {
    name:'尚硅谷atguigu',
    address:'北京',
   }
  },
  methods: {
   test(){
    this.hello()
   }
  },
 }
</script>