mixin混合
2021/8/30 23:06:10
本文主要是介绍mixin混合,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
student.vue
<template> <div class="student"> <h2>{{name}}</h2> <h2>{{age}}</h2> <button @click="showName">点我显示名字</button> </div> </template> <script> // 局部引入 import {hunhe,hunhe2} from '../mixin.js' export default{ name:'Student', /*data() { return{ name:'张三', age:18 } },*/ mixins:[hunhe,hunhe2] } </script> <style> </style>
school.vue
<template> <div class="school"> <h2>{{name}}</h2> <h2>{{Add}}</h2> <button @click="showName">点我显示名字</button> </div> </template> <script> import {hunhe} from '../mixin.js' export default{ name:'School', data() { return{ name:'老年大学', Add:'加利福尼亚' } }, mixins:[hunhe] } </script> <style> </style>
mixin.js
export const hunhe = { methods:{ showName(){ alert(this.name) } } } export const hunhe2 = { data(){ return{ name:"大王", age:18 } } }
main.js
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false //全局引入 此时单独的组建不需再次引入mixin.js,使用mixins import {hunhe,hunhe2} from './mixin.js' Vue.mixin(hunhe) Vue.mixin(hunhe2) new Vue({ render: h => h(App), }).$mount('#app')
这篇关于mixin混合的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01后台管理开发学习:新手入门指南
- 2024-11-01后台管理系统开发学习:新手入门教程
- 2024-11-01后台开发学习:从入门到实践的简单教程
- 2024-11-01后台综合解决方案学习:从入门到初级实战教程
- 2024-11-01接口模块封装学习入门教程
- 2024-11-01请求动作封装学习:新手入门教程
- 2024-11-01登录鉴权入门:新手必读指南
- 2024-11-01动态面包屑入门:轻松掌握导航设计技巧
- 2024-11-01动态权限入门:新手必读指南
- 2024-11-01动态主题处理入门:新手必读指南