我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue中mixin和组件的区别是什么

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue中mixin和组件的区别是什么

vue中mixin和组件的区别是什么

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

什么是Mixin?

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。

混合对象可以包含任意组件选项。

当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。【相关推荐:vuejs视频教程、web前端开发】

mixin和组件的区别

组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。

而mixins则是在引入组件之后,则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。

单纯组件引用:

  • 父组件 + 子组件 >>> 父组件 + 子组件

mixins:

  • 父组件 + 子组件 >>> new父组件

有点像注册了一个vue的公共方法,可以绑定在多个组件或者多个Vue对象实例中使用。另一点,类似于在原型对象中注册方法,实例对象即组件或者Vue实例对象中,仍然可以定义相同函数名的方法进行覆盖,有点像子类和父类的感觉。

mixins和vuex区别

Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。如果相同对象,组件会覆盖mixins

vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。

mixins的使用

1、首先创建一个js文件,例如elTableAdsorbent.js

export const elTableAdsorbent = {
  data() {
    return {
      count:10
    }
  },
  methods: {
    // 显示页面中所有内容
    handleCount() {
      this.count++
  }
}

或者

// 定义一个混入对象
    var myMixin = {
        data(){
            return{
                parent: 405
            }
        },
        mounted: function () {
            this.hello()
        },
        methods: {
            hello: function () {
                console.log(this.parent, 'hello from mixin!')
            }
        }
    }

2、然后在需要此需求的vue页面引入并且使用

<el-button type="primary" @click="handleCount">{{count}}</el-button>
 
import { elTableAdsorbent } from '@/utils/mixin/elTableAdsorbent'
 
export default {
  mixins: [elTableAdsorbent],
  data() {
    return {}
  },
  created(){},
  methods:{}, 
  watch:{}
}

3、同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

4、两个对象键名冲突时,取组件对象的键值对。

var mixin = {
  methods: {
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    conflicting: function () {
      console.log('from self')
    }
  }
})
vm.conflicting() // => "from self"

mixins的应用

var install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (options) {
    // 逻辑...
  }
}

(学习视频分享:vuejs入门教程、编程基础视频)

以上就是vue中mixin和组件的区别是什么的详细内容,更多请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue中mixin和组件的区别是什么

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue中mixin和组件的区别是什么

mixin和组件的区别:组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立;而mixins在引入组件之后相当于父组件的各种属性方法都被扩充了,会将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。
2023-05-14

vue中mixin和组件的区别有哪些

这篇文章主要介绍“vue中mixin和组件的区别有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue中mixin和组件的区别有哪些”文章能帮助大家解决问题。mixin和组件的区别:组件在引用之
2023-07-04

Vue中的插件和组件有什么区别

这篇文章主要介绍了Vue中的插件和组件有什么区别的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中的插件和组件有什么区别文章都会有所收获,下面我们一起来看看吧。一、组件是什么回顾以前对组件的定义:组件就是把
2023-06-30

Vue中props组件和slot标签的区别是什么

本文小编为大家详细介绍“Vue中props组件和slot标签的区别是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue中props组件和slot标签的区别是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧
2023-07-05

vue全局组件和局部组件的区别是什么

区别:1、使用范围不同,全局组件可以在页面中任何位置使用,局部组件只能在定义它的el中使用,能再不其他位置使用,否则就无法生效。2、定义组件的方法不同,全局组件可以使用“Vue.component(tagName,options)”定义,局部组件可以通过Vue实例中component属性定义。
2023-05-14

vue中组件化和模块化有什么区别

组件化和模块化的区别:模块化是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个每个功能模块的职能一致。组件化是从UI界面的角度进行规划;前端的组件化,方便UI组件的重用。
2023-05-14

vue中@click和@click.native.prevent的区别是什么

这篇文章主要介绍“vue中@click和@click.native.prevent的区别是什么”,在日常操作中,相信很多人在vue中@click和@click.native.prevent的区别是什么问题上存在疑惑,小编查阅了各式资料,整理
2023-06-30

vue中mvvm和mvc的区别是什么

本篇内容介绍了“vue中mvvm和mvc的区别是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!mvvm和mvc的区别:1、mvvm各部分
2023-07-04

vue中$route和$router的区别是什么

今天就跟大家聊聊有关vue中$route和$router的区别是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。路由的设置和跳转中有两个对象$router和$route,是不是很像
2023-06-25

vue和react的区别是什么

本文小编为大家详细介绍“vue和react的区别是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue和react的区别是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。具体分析如下:1.监听数据变化的实
2023-06-05

Vue中的computed和watch的区别是什么

Vue中的computed和watch的区别是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。下面带大家认识Vue中的computed 和 watch,介绍一下compu
2023-06-22

Vue中props组件和slot标签的区别

props 和 slot 在 Vue 中的作用略有不同,props 更多地用于父子组件之间的数据传递,而 slot 则更多地用于组件的复用和扩展。感兴趣的同学可以参考阅读
2023-05-14

Vue中的watch、watch和computed的区别是什么

本文小编为大家详细介绍“Vue中的watch、watch和computed的区别是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue中的watch、watch和computed的区别是什么”文章能帮助大家解决疑惑,下面跟着小编的思路
2023-07-02

vue中v-if和v-for的区别是什么

v-if和v-for的区别:1、作用不同,v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回 true值的时候被渲染;而v-for指令基于一个数组来渲染一个列表。2、优先级不同,v-for优先级比v-if高,在进行if判断的时候v-for是比v-if先进行判断的。
2023-05-14

vue中传参params和data的区别是什么

今天小编给大家分享一下vue中传参params和data的区别是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1、使用d
2023-06-30

编程热搜

目录