vue 使用混入mixin

1、局部混入

1.1 componts文件夹下、新建mixin.js文件(或者新建mixin文件夹,里边包含多种定义的混入方法)

// 定义mixins
const mixin ={
	data(){
		return:{
			data:"mixins使用",
			message:"方法2信息"
		}
	},
	methods:{
		testMixin(){
			console.log("混入方法测试111", this.data);
		},
		tsetTwo(){
			console.log("混入方法22222", this.message);
		},
	}
}
// 导出mixins
export default mixin

1.2 需要使用mixins的页面

// 方法一
// 引入 mixin
import mixin from '@components/mixins'
// 方法二
//import {mixin文件里的各种方法} from '@components/mixin'
export default {
	mixins: [ mixin ],
	//mixins: [ mixin文件里的各种方法],
	data(){
		return:{
			data:"mixins使用",
			message:"方法2信息"
		}
	},
	cteated(){
		this.testMixin()
	}
}

2、全局使用

main.js文件


// 全局定义
Vue.mixin({
	data() {
		return {
			message: '全局使用'
		}
	},
	methods: {
		mixinInApp() {
			alert(this.message)
		}
	}
})

// 组件中使用直接this.mixinInApp()

你可能感兴趣的:(vue.js,javascript,前端)