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-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门:从零开始的编程之旅
- 2024-11-23Java创业入门:新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解
- 2024-11-23Java对接阿里云智能语音服务入门教程
- 2024-11-23JAVA对接阿里云智能语音服务入门教程
- 2024-11-23Java副业入门:初学者的简单教程
- 2024-11-23JAVA副业入门:初学者的实战指南