1.mixin混入例子:
- 创建混入对象
myMixin - 在vue实例中添加
mixins:[myMixin]，完成对自创建对象myMixin的混入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'>
{{msg}}
</div>
<script src="./vue.js"></script>
<script>
//需要混入的对象myMixin
const myMixin = {
data(){
return {
msg:"123"
}
},
created(){
this.sayHello();
},
methods: {
sayHello() {
console.log('hello mixin');
}
},
}
// mixin来分发Vue组件中的可复用功能
new Vue({
el:"#app",
data:{
msg:"小马哥"
},
created(){
console.log(1111);
},
mixins:[myMixin]
})
</script>
</body>
</html>
2.mixin的应用
🍊需求：
- 一个模态框，一个提示框，切换逻辑都是通过布尔值
🔮知识点：
-
全局混入：全局的mixin 要格外小心 因为每个组件实例创建时，它都会被调用
-
Vue.mixin({ })
-
-
局部混入
- 将显示隐藏的切换逻辑单独提取出来，然后通过mixin混入进入
- 父组件中通过
this.$ref+方法名字,完成对子组件内部的方法调用 - 效果：完成了对组件切换的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mixin的应用</title>
</head>
<body>
<div id='app'>
</div>
<script src="./vue.js"></script>
<script>
// 一个是模态框 一个提示框
// 它们看起来不一样，用法不一样，但是逻辑一样（切换boolean）
/*
// 全局的mixin 要格外小心 因为每个组件实例创建时，它都会被调用
Vue.mixin({
})
*/
//🏖切换显示和隐藏逻辑
const toggleShow = {
data() {
return {
isShow: false
}
},
methods: {
toggleShow() {
this.isShow = !this.isShow
}
}
}
//🏖模态框组件
const Modal = {
template: `
<div v-if='isShow'><h3>模态框组件</h3></div>
`,
// 局部的mixin
mixins: [toggleShow]
}
//🏖弹窗组件
const ToolTip = {
template: `
<div v-if='isShow'>
<h2>提示框组件</h2>
</div>
`,
mixins: [toggleShow]
}
//根组件
new Vue({
el: "#app",
data: {
},
components: {
Modal,
ToolTip
},
template: `
<div>
<button @click='handleModel'>模态框</button>
<button @click='handleToolTip'>提示框</button>
<Modal ref='modal'></Modal>
<ToolTip ref='toolTip'></ToolTip>
</div>
`,
methods: {
handleModel() {
this.$refs.modal.toggleShow();
},
handleToolTip() {
this.$refs.toolTip.toggleShow();
}
},
})
</script>
</body>
</html>
