day76-mixins混合，plugins插件，scoped混合

mixins混合

把多个组件公用的配置属性提取成一个混入对象

先配置minins.js文件

 export const mixin={
     methods: {
         showName() {
             alert(this.name)
         }
     },
 }

 

在school中引入mixins文件

 //引入混合
 import {mixin} from '../mixin'

 

声明mixins混合：

 mixins:[mixin]

 

mixins中的配置就可以正常使用

<template>
   <div class="demo">
     <h1>{{msg}}</h1>
     <h2 @click="showName">学校名称：{{name}}</h2>
     <h2>学校地址：{{address}}</h2>
 ​
   </div>
 </template>
 ​
 <script>
 //引入混合
 import {mixin} from '../mixin'
 export default {
   name:'SchoolMsg',
   data(){
     return{
       name:'中南大学',
       address:'changsha'
 ​
     }
   },
   mixins:[mixin]
 ​
 ​
 }
 </script>
 ​
 <style scoped>
   .demo{
     background-color: gray;
   }
 </style>

 

student中的配置相同

总结

 /*
   mixin混入：
     功能：可以把多个组件公用的配置提取成一个混入对象
     使用方式：
       第一步定义混合：
       {
           data(){},
           methods:{}
       }
       第二部使用混合：
       1.全局混合：Vue.mixin(xxx)
       2.局部混合：mixins:['xxx']
 */

 

插件

增强vue的功能，plugins.js文件

首先创建一个plugins.js文件，在其中配置需要的全局指令，过滤器等函数

export default {
     install(Vue){
         console.log("@@@@install",Vue)
         //全局过滤器
         Vue.filter('myslice',function (val) {
             return val.slice(0,4)
         })
         //定义全局指令
         Vue.directive('fbind',{
                 bind(element,binding){
                     //指令与元素绑定成果时调用
                     element.value = binding.value
                 },
                 inserted(element){
                     //指令所在元素被插入页面时
                     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('hello')}
     }
 }

 

在main.js中引入插件并使用插件

main.js文件：

import Vue from 'vue'
 import App from "@/App";
 import plugins from "@/plugins";
 //引入插件
 Vue.config.productionTip = false
 Vue.use(plugins)
 //使用插件
 new Vue({
     el:'#app',
     render:h=>h(App)
 })

 

此时在school和student中就可以正常使用插件中定义的各种信息

总结

 /*
   插件：
     功能：增强vue功能
     本质：包含install方法的一个对象，install的第一个参数是vue，第二个以后的参数是插件使用者传递的数据
     定义插件：
     对象.install = function(Vue,options){
      //添加过滤器
      Vue.filter(......)
 ​
      //添加全局指令
      Vue.directive(......)
 ​
      //添加全局混入
      Vue.mixin(......)
 ​
      //......
     }
 ​
     使用插件：Vue.ues(xxx)
 */

 

scoped样式

 作用：让样式在局部生效，防止冲突
 写法：<style scoped>