vue学习（十）mixin 偷懒
2024-09-02 05:40:20
一 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>
最新文章
- Eclipse设置黑色主题
- capwap DTSL 加密分析
- 详解DHV：怎么具体展示高价值
- ZOJ 1016 Parencodings
- JavaScript事件委托的技术原理
- WinAPI——Windows 消息
- kibana 日志查看界面
- Moq的使用心得
- 3.SDL落地方案
- 小程序block标签配合if和else 和 动态修改标题栏
- redis初始化服务器
- 玩转BLE(2)_使用bluepy扫描BLE的广播数据
- Spring 整合 Quartz 实现动态定时任务
- Decision Trees：机器学习根据大量数据,已知年龄、收入、是否上海人、私家车价格的人，预测Ta是否有真实购买上海黄浦区楼房的能力—Jason niu
- 【ORACLE】SQL查询出每个组中的第一条记录
- [macOS] Error: /usr/local must be writable!" (Sierra 10.12 )
- poj 1797 最大最小路段【dijkstra】 (经典)
- es6 Set 结合 Array.from 用法
- bzoj千题计划198：bzoj1084: [SCOI2005]最大子矩阵
- 关于C++中操作符重载的疑问 ：四个运算符=, -&gt;, [], ()不可以重载为全局函数（友员函数）