您的位置: 首页  >  IT文章  >  Vue（十）：混入、插件和过滤器

Vue（十）：混入、插件和过滤器

分类: IT文章 • 2023-11-08 21:26:33

1、混入组件
　　vue实例中有这个一个属性mixins，是个数组。它的作用呢，就是将一个组件混入进另一个组件，使得两个组件的方法，属性，生命钩子啥的合二为一。使用的方式和导入类似，只不过一个放在了components中，一个放在了mixins中。当然，混入组件可没有懒加载啥的。
　　组件混入合并的时候呢，如果有不同的属性，方法，两个组件的属性方法会合并在一起。比如，组件1中混入组件2，组件1的data中有个属性叫str1，组件2有个str2.那么合并之后，组件2的data中会同时拥有str1和str2。如果两个都是str1呢，那就产生了冲突，产生冲突的属性和方法，一律以原有组件为主。
　　组件混入合并的还有生命钩子，这个不一样了，两个生命钩子中的内容会合在一起，且首先运行混入组件的内容。
　　也可以全局混入组件，但是这样的话，所有的vue实例都会被混入。慎用吧。。。

2、插件
　　插件一般是用来为vue添加全局功能，比如添加全局的方法和属性、混入全局组件、添加全局资源（指令、过滤器、过渡等）、添加第三方的类库（element-ui等）。
　　1）、插件的使用
　　引入插件，像导入组件那样。然后使用Vue.use()命令使用插件，插件名写在括号内。注意，引入插件需要在Vue实例完成前引入。
　　另外还有一个可传入的参数，Vue.use(MyPlugin, { true })，myplugin是插件名，后面的参数设置会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。
　　2）、引入Element-UI
　　首先，你要安装了nodejs和vue的脚手架（vue-cli），也就是搭建好了一个vue的项目。如果没有，我第一篇讲的就是如何安装、搭建和发布vue项目。
　　然后，使用npm i element-ui -S命令，在项目中安装element-ui的库。然后在main.js中写上下面三行代码，就可以全局使用element-ui了，但是，一定要记得，在vue实例之前插入。

import Elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Elementui)

3、过滤器

　　Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。可以简单理解成：你把一个值传给一个方法，这个方法内部再做逻辑修改，比如说你传个id，他返回给你一个name。但是、但是、但是，传入的id值并没有改变，就像id=1，你写了一个{{id+1}}一样，显示的是2，但是id还是1。下面是一个简单的例子，过滤器写在filters属性中，像方法一样。

<template>
    <div>
        {{num1 | numChange}}{{num1}}
        {{num1+1 | numChange | numChange}}
    </div>
</template>

<script>
export default {
    data(){  
        return{
            num1:1,
        }
    },
    filters:{
        numChange(value){
            return value+1;
        }
    }
}
</script>

　　然后就是过滤器的使用，过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。要是还不明白就好好看看上面的代码，代码虽然逻辑比较简单，但是用法是正确的。

　　过滤器呢，大家也看到了，“管道”符号前面是传给过滤器的值，如果你前面写的是id+1，那么你传给过滤器的就是2而不是1，显示也是3而不是2了。过滤器还可以串联，{{num1+1 | numChange | numChange}}就是串联，第二个numChange传入的值就是{{num1 | numChange}}返回的值。这里为了省事，就不再写一个过滤器了，相信大家也能看懂。

　　前面举的例子呢，都是单参数，过滤器也支持多参数。多参数就像这样{{num1 | numChange(2,num2)}},第一个参数呢，是num1，第二个是数值2，第三个是num2，对应的过滤器也更改为三个形参就行了。当然多参数也是可以串联的，但是、但是、但是，“管道”符号前面的最终值是过滤器的第一个参数，这点是什么时候都不能变的。另外呢，这个过滤器本身就是js写的方法，如果你定义了多个参数，少传参数也是能用的，不过要注意过滤器内的逻辑，判断一下传入的参数，符不符合你的使用规范，还是有必要的。

相关推荐