一.mixin的合并规则
1> 如果Mixin对象中的选项和组件对象中的选项发生了冲突，那么Vue会如何操作呢？
-- 这里分成不同的情况来进行处理；
2> 情况一：如果是data函数的返回值对象
-- 返回值对象默认情况下会进行合并；
-- 如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据；
3> 情况二：如何生命周期钩子函数
-- 生命周期的钩子函数会被合并到数组中，都会被调用；
4> 情况三：值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。
-- 比如都有methods选项，并且都定义了方法，那么它们都会生效；
-- 但是如果对象的key相同，那么会取组件对象的键值对；
一.一 认识mixin (私有混入)
1. 有的时候组件和组件之间会存在相同代码逻辑,我们希望对相同的代码逻辑进行抽取
2. 在Vue2.0 和 Vue3.0 中都支持的一种方式就是Mixin来完成;
-- Mixin 提供了一种非常灵活的方式, 来分发Vue组件中的可复用功能;
-- 一个Mixin对象可以包含任何组件选项(data methods computed watch ......)
-- 当组件使用 Mixin 对象时, 所有Mixin对象的选项将被 混合 进入该组件本身的选项中;
3. 他可以在任何组件页面使用
实际截图
image.png
一.二.注意:情况一 你当前页面的data(数据)会覆盖你的混入 实际截图:
image.png
所以就算你写了混入 引入到你当前页面,但是你当前页面的 data,如果和混入进来的data,里面的数据相同的话,那么当前页面的就会覆盖你引入进来的了
一.三.注意:情况二 如果生命周期钩子函数: 生命周期的钩子函数会被合并到数组中,也就是说混入的和当前页面的都会被调用
image.png
一.四.注意: 值为对象的选项,例如methods,components 和directives,将被合并为同一个对象
1. 比如都有methods选项,并且都定义了方法, 那么他们都会生效;
2. 但是如果对象的key相同(也就是说比如你在混入中定义了一个方法叫foo,当前组件你也定义了一个方法叫foo),那么会取当前组件的那个方法,会覆盖;
二.全局混入
如果组件中的某些选项,是所有组件都需要拥有的,那么这个时候我们可以使用全局的mixin
1. 全局的Mixin可以使用应用app 的方法mixin来完成注册;
2. 一旦注册,那么全局混入的选项将会影响到每个组件
实际截图
image.png
三.混入我使用封装组件的方式来用：
首先是在views文件夹中封装一个libs 的文件夹 （里面写上一个index.js文件和 button.vue 文件）
截图如下：
image.png
button 按钮的封装
<template>
<!-- 这个地方就是用户传入进来的动态类名了 -->
<button :class="['my-btn',btnStyle]">按钮</button>
</template>
<script>
export default {
name:"MyBtn",
props: {
btnStyle: String
}
}
</script>
<style>
.my-btn {
height: 34px;
padding: 0 15px;
border: none;
outline: none;
background-color: #000;
color: #fff;
}
.my-btn.btn-primary {
background-color: blue;
color: #fff;
}
.my-btn.btn-danger {
background-color: red;
color: #fff;
}
.my-btn.btn-success {
background-color: green;
color: #fff;
}
</style>
index.js 文件
// 导入你写好的 button按钮文件
import MyBtn from "./button"
export default {
components: {
MyBtn
}
}
其他任何页面 mixins 的使用截图如下(这种写法很LOW可以用写在main.js 中)：
image.png
如果不想和上面那么麻烦的话 就导入到main.js中截图如下：
image.png
四.Extends的基本使用
假如每个组件想使用对应的方法和data数据不想使用Mixin来混入的话,可以使用Extends
image.png
注意: 他的继承只能继承对象里面的东西, template模板里面的标签是继承不了的,
他可以实现多个继承
extends:[BasePage,AboutPage....]
网友评论