关键词搜索

源码搜索 ×
×

Vue mixin混入

发布2023-04-13浏览270次

详情内容

Vue mixin混入

mixin(混入)
功能:可以将多个组件共用的配置提取成一个混入对象
比如有两个组件都有相同的方法,我们就可以将这个方法提取成一个混入对象,两个组件通过引入就可以使用此方法
使用方式:

局部使用

在src下创建mixin.js

export const fuyong = {
	methods:{
		showName(){
			alert(this.name);
		}
	}
} 

    在组件中使用

    <script>
    import { fuyong } from  '../mixin'
    	export default{
    		name:'School',
    		data(){
    			return{
    				name:'adc'
    			}
    		},
    		mixins:[fuyong]
    	}
    </script>
    
      8
    • 9
    • 10
    • 11
    • 12

    注意:

    当组件中data和mixin中有相同数据

    export const fuyong = {
    	methods:{
    		showName(){
    			alert(this.name);
    		}
    	},
    	mounted(){
    		console.log('你好啊!!!');   
    	}
    } 
    
    export const fuyong2 = {
    	data(){
    		return{
    			x:100,
    			y:200
    		}
    	}
    }
    
      8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在组件中使用

    <script>
    import { fuyong,fuyong2 } from  '../mixin'
    	export default{
    		name:'School',
    		data(){
    			return{
    				name:'adc',
    				x:666                  //组件有的数据,依然为组件的数据
    			}
    		},
    		mixins:[fuyong,fuyong2],
    		mounted(){
    			console.log('你好啊!!!');//生命钩子混入和组件都会使用
    									    //先使用混入中的生命钩子,再使用组件中的生命钩子
    		}
    	}
    </script>
    
      8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    全局使用

    export const fuyong = {
    	methods:{
    		showName(){
    			alert(this.name);
    		}
    	}
    } 
    
    export const fuyong2 = {
    	data(){
    		return{
    			x:100,
    			y:200
    		}
    	}
    }
    
      8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在main.js中

    import Vue from 'vue'
    import App from './App.vue'
    import {fuyong,fuyong2} from './mixin'
    Vue.config.productionTip = false
    
    Vue.mixin(fuyong)
    Vue.mixin(fuyong2)
    
    new Vue({
    	el:'#app',
    	render:h=>h(App)
    })
    
      8
    • 9
    • 10
    • 11
    • 12

    相关技术文章

    点击QQ咨询
    开通会员
    返回顶部
    ×
    微信扫码支付
    微信扫码支付
    确定支付下载
    请使用微信描二维码支付
    ×

    提示信息

    ×

    选择支付方式

    • 微信支付
    • 支付宝付款
    确定支付下载