Vue的插件_swiper插件「建议收藏」

一、插件

插件的本质是一个{}

应该先 应用插件，然后再创建vm。

功能

用于增强Vue

本质

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

1. 定义插件

对象.install = function(Vue,options){ 
   
  //1.添加全局过滤器
  Vue.filter(....)

  //2.添加全局指令
  Vue.directive(....)

  //3.配置全局混入（合）
  Vue.mixin(....)

  //4.添加实例方法
  Vue.prototype.$myMethod = function(){ 
   ...}
  Vue.prototype.$myProperty = xxxx
}

2. 使用插件

Vue.use()

二、例

1. plugins.js

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
                element.focus()
            },
        },)

        // 定义混入
        Vue.mixin({ 
   
            data() { 
   
                return { 
   
                    x:100,
                    y:200
                }
            },
        })

        //给Vue原型上添加一个方法（vm和vc就都能用了）
        Vue.prototype.hello = ()=>{ 
   alert('你好啊')}
    }
}

2. main.js

// 引入Vue
import  Vue from 'vue'
// 引入App
import App from './App'
//引入插件
import plugins from './plugins'

// 关闭生产提示
Vue.config.productionTip = false

//应用（使用）插件
Vue.use(plugins,1,2,3)

new Vue({ 
   
    el:'#app',
    render:h => h(App)
})

3. App.vue 父组件

<template>
    <div>
        <MyStudent/>
        <hr>
        <MySchool/>
    </div>
</template>

<script> import MyStudent from './components/MyStudent.vue' import MySchool from './components/MySchool.vue' export default { 
      name:'App', components:{ 
     MyStudent,MySchool}, } </script>

<style> </style>

4. MySchool.vue 子组件

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

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

5. MyStudent.vue

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

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

今天的文章Vue的插件_swiper插件「建议收藏」分享到此就结束了，感谢您的阅读。