vue学习(十)mixin 偷懒
一 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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现