Vue mixins（混入）附代码示例详解

mixins 我们称它为 “混入” ；

官方的解释：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

简单理解它的作用：

可复用组件中的功能，可以理解为一个公用的组件对象，定义一个混入对象以后，在其它的组件中引入该对象，就相当该对象中的东西都在组件中一样，在发生冲突时以组件数据优先；

下面我们来看怎么定义和使用它；

1. 新建一个文件，文件名为: myMixin.vue；

页面说明：该文件的作用是定义一个混入对象。在组件created的时候，执行hello方法，打印日志

// 定义一个混入对象
import Vue from 'vue'export const myMixin = {data(){return {}},created: function () {this.hello(1)},methods: {hello: function (num) {console.log('hello from mixin!',num)}}
}

2. 在页面组件 home.vue 中引用混入对象。在组件created的时候，执行hello方法，打印日志，因为引入了 myMixin，所以可以使用 myMixin 里面的方法和数据。

<template>
</template>
<script>import { myMixin } from '@/mixins/myMixin'export default {mixins: [myMixin],data() {return {}},created: function () {this.hello(2)},}
</script>

最终结果：

在home页面执行 created 的时候，会执行两遍hello函数。

打印出日志：

hello from mixin! 1

hello from mixin! 2

最后提供一个官方文档的地址：混入 --Vue.js

Vue mixins（混入）附代码示例详解相关推荐

java网络编程阻塞_Java网络编程由浅入深三一文了解非阻塞通信的图文代码示例详解...
本文详细介绍组成非阻塞通信的几大类:Buffer.Channel.Selector.SelectionKey 非阻塞通信的流程ServerSocketChannel通过open方法获取ServerSo ...
curd操作php代码,Laravel 5.6中的CURD操作（代码示例详解）
在本篇文章中,我将给大家分享laravel 5.6版本中的基本crud(创建,读取,更新和删除)应用程序模块.你可以按照下面的步骤在laravel 5.6中创建CRUD应用程序. Laravel是一个 ...
Matlab 基本知识（附代码注释详解）
Matlab 基本知识第1部分:变量定义和基本运算 %% % 建议有C语言或其他编程基础,了解线性代数和矩阵相关知识 % https://ww2.mathworks.cn/help/matlab/ ...
MIT操作系统实验lab1（pingpong案例：附代码、详解）
1.题目描述:在xv6上实现pingpong程序,即两个进程在管道两侧来回通信.父进程将"ping"写入管道,子进程从管道将其读出并打印<pid>:received p ...
c# 服务器性能监控,C#服务器性能监控之WMI的代码示例详解
1.WMI简介 WMI是英文Windows Management Instrumentation的简写,通过使用WMI,我们可以获取本地或远程服务器的性能参数和进程运行情况,以及大部分硬件信息,但前提 ...
不愧是京东大牛！用Java实现黄金分割数的示例详解（附代码）
这篇文章主要介绍了java 实现黄金分割数的示例详解,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧. 黄金分割数 0.618 与美学有重要的关系.舞台上报幕员所站的位置大约就是舞台宽 ...
java学习类变量类方法_这篇文章主要介绍了JAVA类变量及类方法代码实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类变量(...
这篇文章主要介绍了JAVA类变量及类方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类变量(static) 类变量是该类的所有对象共 ...
c语言d打开文件夹,BAT批处理之文件与文件夹操作代码(附xcopy命令详解)
批处理中的文件.文件夹操作,xcopy命令的用法. 一,建bat文件自动执行复制,删除命令. 例1:复制cd.dll文件至windows\system32的bat文件内容: copy cd.dll % ...
x264 代码重点详解详细分析
eg mplayer x264 代码重点详解详细分析分类: ffmpeg 2012-02-06 09:19 4229人阅读评论(1) 收藏举报 h.264codecflv优化initializ ...

Vue mixins（混入）附代码示例详解

Vue mixins（混入）附代码示例详解相关推荐

最新文章

热门文章

Vue mixins（混入） 附代码示例详解

Vue mixins（混入） 附代码示例详解相关推荐

最新文章

热门文章

Vue mixins（混入）附代码示例详解

Vue mixins（混入）附代码示例详解相关推荐