Vue中mixin的使用和插件的使用

• mixin(混入)

• 当多个组件的方法、数据相同时。可以统一调用mixin。mixin用于保存组件们共同拥有的方法和数据。

• 第一个组件和第二个组件有相同的method。用mixin.js进行封装

• //------------------------第一个组件------------------------------
  <template>
    <div>
      <h2 @click="showName">姓名:{{ name }}</h2>
      <h2>地址：{{ address }}</h2>
    </div>
  </template>
  <script>
  import { mixin } from './mixin';
  export default {
    name: 'useSelect',
    data() {
      return {
        name: '猴哥',
        address: '花果山'
      }
    },
    mixins:[mixin]
  }
  </script>

• 当第二个组件和mixin.js文件都设置了x,y属性。先调用组件的x,y。如果组件没有设置x，y属性，则调用mixin.js文件中的x,y

• mounted()生命周期钩子，如果组件和mixin.js文件都设置mounted。两个的mounted都调用。不存在谁先谁后

• //--------------------------第二个组件--------------------------------
  <template>
    <div>
      <h2 @click="showName">学生姓名:{{ name }}</h2>
      <h2>学生性别：{{ sex }}</h2>
      <h2>{{ x }}{{ y }}</h2>
    </div>
  </template>
  ​
  <script>
  // 导入mixin.js文件
  import { mixin,minxin2 } from './mixin';
  export default {
      data(){
          return {
            name:'张三',
            sex: '男',
            // 如果这里也有x,y那么用这里的x,y。没有则用mixin2中的x,y但生命周期钩子。不以谁为主,两边都写则都使用
            x: '3',
            y: '4'
          }
      },
      // 像props那样接收
      mixins:[mixin,mixin2]
  }
  </script>

• 将mixin.js文件进行暴露

• export const mixin = {
      methods: {
          showName() {
              console.log(this.name);
          }
      }
  }
  export const minxin2 = {
      data(){
          return {
              x:100,
              y:300
          }
      }
  }
  /* 当导出的方法只有一个时用默认导出
   const mixin = {
       methods: {
           showName() {
               console.log(this.name);
           }
       }
   }
   export default minxin */

• 全局配置mixin

• 需要在vm中导入mixin.js

• import Vue from 'vue'
  import App from './App'
  import {mixin,mixin2} from './components/mixin'
  Vue.mixin(mixin)
  Vue.mixin(mixin2)
  ​
  new Vue({
    el: '#app',
    router,
   render: h => h(App)
  })

插件

• 插件的作用是为组件加buff

• 下面定义了一个plugins.js的文件作为插件

• export default {
      // install(){}为成功设置插件
      install(){
          // 全局过滤器
          Vue.filter('upDatetime', function (value) {
              return value.slice(0, 4);
          })
          // 全局v-fbind的自定义指令
          Vue.directive('fbing', {
              bing(element, bangding) {
                  element.value = bangding.value
              },
              inserted(element, bangding) {
                  element.focus()
              },
              update(element, bangding) {
                  element.value = bangding.value
              },
          })
          //给Vue原型上添加一个方法（vm和vc就能用了）
          Vue.prototype.hello = () => {alert('我时hello方法')}
      }
  }

• 在main.js中引入plugins.js插件

• import Vue from 'vue'
  import App from './App'
  import plugins from './components/plugins'
  ​
  // 使用use来使用插件
  Vue.use(plugins)
  new Vue({
    el: '#app',
    render: h => h(App)
  })
  ​

• 在School组件中使用插件提供的功能

• <template>
    <div>
     <h2>学校的名字：{{ name | upDatetime }}</h2>
     <button @click="test">点位测试以下hello方法</button>
    </div>
  </template>
  ​
  <script>
  export default {
      data(){
          return {
           name: '小猴子的玩具商'
          }
      },
      methods:{
        test(){
          this.hello()
        }
      }
  }
  </script>