一 mixin混入偷懒技术
架子
<div id="app"> {{msg}} </div> <script> let app = new Vue({ el:'#app', data:{ msg:'晓强' }, }) </script>
mixin偷懒
<div id="app"> {{msg}} // 我在这就是想看 msg 的内容 所以 需要 mixin 就可以啦 </div> <script> const myMixin={ data(){ return{ msg:'myMixin偷懒' } } }; let app = new Vue({ el:'#app', data:{ title:'晓强' }, mixins : [myMixin] }) </script>
我们不仅可以偷懒数据 也可以偷懒方法
<div id="app"> {{msg}} </div> <script> const myMixin={ data(){ return{ msg:'myMixin偷懒' } }, created(){ this.SayHello(); }, methods:{ SayHello(){ console.log('hello') } } }; let app = new Vue({ el:'#app', data:{ title:'晓强' // 如果这个是 msg 就显示的是晓强 }, mixins : [myMixin] }) </script>
二mixin混入技术应用
最先开始的架子
<div id="app"> {{msg}} </div> <script> // 模态框 const Modal={ template:`<div v-if="isShow"><h3>模态框组件</h3></div>`, data(){ return{ isShow:false } }, methods:{ toggleShow(){ this.isShow = !this.isShow } } }; // 提示框 const Tooltip={ template:`<div v-if="isShow"><h2>提示框组件</h2></div>`, data(){ return{ isShow:false } }, methods:{ toggleShow(){ this.isShow = !this.isShow } } }; let app=new Vue({ el:'#app', data:{ msg:'mixin' } }) </script>
我们可以发现 上面 的模态框 和提示框 有重复的代码
提取
const toggleShow = { data() { return { isShow: false } }, methods: { toggleShow() { this.isShow = !this.isShow } } };
整体代码
<body> <!--一个是模态框 一个是提示框 被弹出--> <!--他们两个看起来不一样 用法不一样 但是逻辑是一样的（切换boolean）--> <div id="app"> {{msg}} </div> <script> /* * 全局的mixin要格外小心 因为每个组件实例创建时都会被调用 * Vue.mixin({ * data(){ * * } * }) * */ const toggleShow = { data() { return { isShow: false } }, methods: { toggleShow() { this.isShow = !this.isShow } } }; // 模态框 const Modal = { template: `<div v-if="isShow"><h3>模态框组件</h3></div>`, mixins: [toggleShow] }; // 提示框 const Tooltip = { template: `<div v-if="isShow"><h2>提示框组件</h2></div>`, mixins: [toggleShow] }; let app = new Vue({ el: '#app', data: { msg: 'mixin' }, components: { Modal, Tooltip }, template: ` <div> <Modal ref="motai"></Modal> <Tooltip ref="tooltip"></Tooltip> <button @click="handleModel">模态框</button> <button @click="handleTooltip">提示框</button> </div> `, methods: { handleModel() { this.$refs.motai.toggleShow() }, handleTooltip() { this.$refs.tooltip.toggleShow() } }, }) </script>