Vue之mixin混入詳解
局部混入
<template> <div> <h2 @click="showName">學生姓名:{{name}}</h2> <h2>學生性別:{{sex}}</h2> </div> </template> <script> //引入一個混合 import { hunhe,hunhe2 } from '../mixin' export default { name: 'Student', data() { return { name: '張三', sex: '男' } }, mixins: [hunhe,hunhe2] } </script>
export const hunhe = { methods: { showName() { alert(this.name) } } } export const hunhe2 = { data() { return { x: 100, y: 200 } } }
全局混入
import { hunhe, hunhe2 } from './mixin' Vue.mixin(hunhe) Vue.mixin(hunhe2)
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!
推薦閱讀:
- Vue組件化(ref,props, mixin,.插件)詳解
- vue cli 局部混入mixin和全局混入mixin的過程
- Vue中Mixin&extends的詳細使用教程
- vue3 mixin 混入使用方法
- vue混入mixin流程與優缺點詳解