当多个组件的方法、数据相同时。可以统一调用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,minxin2]
}
</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>