Vue知识点总结(22)——mixin混入技术(超级详细)
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!
在web前端的发展中,组件化、模块化的思想一直在贯彻目前的技术发展。
组件的一大重要作用就是可复用,我封装完组件之后,可以在任何地方重复使用我的组件,不需要多次开发。正所谓,一次封装,多次使用。
然而组件和组件之间,其实也有很多的功能可以复用。
我们简单举个例子,一个提示框组件,一个模态框组件。它们在展示形态上有所不同,但是它们触发的机理基本一样,都是通过触发条件的出现,改变v-if的值,从而实现组件的展示。
也就是说,虽然它们两个组件间有逻辑重复的功能,这就可以进行复用,从而提高我们的开发效率。
vue提供了一套可复用&组合的混入偷懒技术mixin。
为什么叫它偷懒技术呢,因为复用本来就是为了“偷懒”,更加专注有效操作,将无效操作尽量减少。
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
先来个小例子,展示一下mixin的使用。
<div id="app">
{{msg}}
</div>
<script>
const myMixin = {
data () {
return {
msg:123
}
},
created () {
this.sayHello();
},
methods: {
sayHello(){
console.log('hello mixin');
}
}
}
new Vue({
el:'#app',
data:{
title:'Ray'
},
mixins: [myMixin],
});
</script>
我们写了一个局部组件myMixin,在一个实例化的vue中,我们写了一个和data同级的mixins属性,以数组的形式放入我们之前写的局部组件的名字。在这里也可以看出,mixins中可以放的不止一个组件,也就是说,我们可以将我们想复用的任何组件都放进入。
然后我们看下页面的渲染。
它成功的执行了myMixin中的方法和钩子函数的内容。
这是mixin最基本的使用。
下面我们以一个开发中的实际案例,展示一下mixin在实际开发中的使用。
const toggleShow = {
data () {
return {
isShow:false
}
},
methods: {
toggleShow(){
console.log("点击!");
this.isShow = !this.isShow;
}
}
}
const Model = {
template:`
<div v-if='isShow'>
<h3>模态框组件</h3>
</div>
`,
// 局部的mixin
mixins: [toggleShow]
}
const Toast = {
template:`
<div v-if='isShow'>
<h2>提示框组件</h2>
</div>
`,
// 局部的mixin
mixins: [toggleShow]
}
new Vue({
el:'#app',
data:{
},
components: {
Model,
Toast
},
template:`
<div>
<button @click='handleModel'>模态框</button>
<button @click='handleToast'>提示框</button>
<Model ref='model'></Model>
<Toast ref='toast'></Toast>
</div>
`,
methods:{
handleModel(){
this.$refs.model.toggleShow();
},
handleToast(){
this.$refs.toast.toggleShow();
}
}
});
</script>
现在有一个局部组件Model为模态框,一个局部组件Toast为提示框。
它们看起来不一样,用法不一样,但是逻辑一样,都是切换v-if的boolean值。
然后我们又写了一个局部组件toggleShow,这个组件就是被我们重复复用的组件,用于提供模态框和提示框都需要的逻辑功能。
并且我们在Model和Toast都通过 mixins: [toggleShow] 调用了这个被复用组件。
然后我们在一个实例化的vue中使用一下这两个组件,并且给他们绑定ref属性,用于调用它们的toggleShow方法,实现展示的效果。
我们看一下页面的实际渲染情况:
没有任何问题,通过我们点击按钮,模态框和提示框都完成了相应的展示。
我们实现了从toggleShow组件中抽离功能,分发给Model和Toast组件的效果。
这就是mixin在我们实际的工作开发中的使用,还是非常好用的,可以将组件中可以被复用的功能,继续抽离出来,分发给需要的组件。
有微信小程序课设、毕设需求联系个人QQ:505417246
关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢!
相关文章
- Vue watch、computed 数据监听
- vue - check-versions.js for shell
- Vue - 实现图片裁剪功能,并上传到服务器(内置第三方最优秀的裁剪图片组件,上传到服务器功能)干净整洁无 BUG 的示例源码与超详细的注释,兼容任意浏览器
- Vue - 解析富文本(v-html 指令)
- Vue - Redirected when going from “/login?redirect=%2Fdashboard“ to “/dashboard“ via a navigation
- vue从入门到进阶:过滤器filters(五)
- 02-vue基础-Vue常用特性
- Vue评论案例--数据存放本地---联系子组件调用父组件方法(子组件点击发表-调用父组件更新评论列表)
- Vue知识点总结(21)——对象的变更检测(超级详细)
- Vue知识点总结(18)——生命周期(超级详细)
- Vue知识点总结(15)——匿名插槽(超级详细)
- Vue知识点总结(8)——filter过滤器(超级详细)
- vue工程化引入组件模板
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
- Vue+Echarts监控大屏实例十六:Echarts对接天地图插件开发
- Vue+Echarts监控大屏实例三:交通违规监控模板实例
- vue学习笔记九:Jquery VS Vue之遍历方法对照
- vue基础 Vue.extend
- MintUI引入vue项目以及引入iconfont图标
- vue-element-admin平时使用归纳
- Vue-cli 4在vue.config.js中配置别名
- 2018年最值得关注的30个Vue开源项目
- vscode快速生成vue代码---创建Vue代码模板
- Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
- Django+Vue项目学习第二篇:vue项目创建
- 解决:Vue调试工具vue-devtools安装方法——解决下载速度缓慢,安装报错问题
- Vue学习第23天 —— Vuex中getters详细讲解及使用案例,与computed计算属性对比
- 用Vue实现一个登陆界面