美文网首页
Vue mixin[混入]和Extends的使用方式

Vue mixin[混入]和Extends的使用方式

作者: coderhzc | 来源:发表于2021-05-09 23:42 被阅读0次

一.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

三.混入我使用封装组件的方式来用:

  1. 首先是在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....]

相关文章

  • Vue mixin[混入]和Extends的使用方式

    一.mixin的合并规则 一.一 认识mixin (私有混入) 实际截图 一.二.注意:情况一 你当前页面的dat...

  • 第十六讲、Vue3.x中的Mixin实现组件功能的复用 、全局配

    一、Vue3.x中的mixin介绍使用混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复...

  • vue 组件的理解

    Vue.mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对...

  • vue混入mixin

    Vue.mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对...

  • vue mixin

    混入 mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象...

  • Vue 之 混入(mixins)

    Vue 之 混入(mixins) 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功...

  • vue混入是什么?简单聊一下vue混入

    一、vue混入是什么? 关于vue的混入官方给出的解释是混入 (mixin) 提供了一种非常灵活的方式,来分发 V...

  • Vue-源码详解mixin混入和合并策略

    在vue里面,混入(mixin)是一种特殊的使用方式。一个混入对象可以包含任意的组件选项,可根据需求随意“封装”组...

  • Vue之mixin和mixins

    mixin 官网上:混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对...

  • vue - mixin混入

    1. mixin概念 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入...

网友评论

      本文标题:Vue mixin[混入]和Extends的使用方式

      本文链接:https://www.haomeiwen.com/subject/gthbdltx.html