Vue之混入(mixin)与全局混入
Vue之混入(mixin)与全局混入
接下来通过一个简单的例子看看混入的基础用法:
首先新建一个mixin.js文件,添加以下代码。
let mixin = {
data() {
return {
msg: 'hello mixin'
}
},
created() {
console.log('混入的钩子函数');
},
methods: {
show() {
console.log(this.msg);
}
}
}
export default mixin;
然后新建一个index.vue文件,添加以下代码。
<template>
<div id="myVue">
<span @click="show">{{msg}}</span>
</div>
</template>
<script>
import myMixin from './mixin.js';
export default {
name: 'myVue',
mixins: [myMixin],
created() {
console.log('组件自身的钩子函数');
}
}
</script>
注意:在index.vue文件中要先引入mixin.js文件,然后就可以直接使用mixin.js中定义的数据msg和方法show。
而对于混入对象以及组件自身的created钩子函数呢,它们都将被调用。但混入对象的钩子会在组件自身的钩子之前调用。
如果组件自身定义了与钩子对象中同名的数据或方法,为了避免冲突,vue将优先使用组件自身的数据或方法。
当然也可以将混入对象全局注册,在之后新建的所有vue组件中就都可以使用。
接下来分享一下全局混入的注册方法。
方法一:在工程的main.js中直接注册,实现如下:
import Vue from 'vue';
import App from './App'; Vue.mixin({
created() {
console.log('全局混入的钩子函数');
}
}); /* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
方法二:模块化注册,新建mixin.js文件并添加以下代码:
export default {
install(Vue) {
Vue.mixin({
created() {
console.log('全局混入的钩子函数');
}
})
}
}
然后在main.js中引入该文件并使用use方法进行注册
import Vue from 'vue';
import App from './App';
import myMixin from './mixin.js'; Vue.use(myMixin); /* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
Vue之混入(mixin)与全局混入的更多相关文章
- 应用三:Vue之混入(mixin)与全局混入
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 首先介绍一下混入mixin的概念: 官方文档:混入提供了一种非常灵活的方式,来分发 Vu ...
- Vue全局混入
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 数据对象合并 数据对象在 ...
- vue混入 (mixin)的使用
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项. 使用示 ...
- vue 混入 mixin,自定义指令,过滤器
vue 混入 mixin ,分发 vue 组件中重复的功能 局部的书写格式 // mixin.js var mymixin = { // 这是一个对象:对象里面的写法与组件里面的写法一模一样,组件该 ...
- vue混入mixin的使用,保证你看的明明白白!
场景描述 有些时候,我们发现有些组件部分功能代码是几乎是一样的. 这个时候,我们就可以将相同的逻辑代码抽离出来 此时我们的主角混入mixin就登场了 下面我们有a-test和b-test两个组件,点击 ...
- 浅析vue混入(mixin)
vue中的混入,可以在一定程度上提高代码的复用性.通俗来说,混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”.但是与继承不同的是,继承一般都跟随着属性的重写与合并,混入在不同 ...
- 在小程序中实现全局混入,以混入的形式扩展小程序的api
GitHub: https://github.com/WozHuang/mp-extend 相关文章: 小程序全局状态管理,在页面中获取globalData和使用globalSetData 通过页面预 ...
- 用特征来实现混入(mix-in)式的多重继承
用特征来实现混入(mix-in)式的多重继承 Scala里相当于Java接口的是特征(Trait).Trait的英文意思是特质和性状(本文称其为特征),实际上他比接口还功能强大.与接口不同的是,它还可 ...
- Vue 中的 mixin,component,render,hoc
在项目中,一般我们经常会基于一套现有组件库进行快速开发,但是现实中往往需要对组件库进行定制化改造二次封装 混入(mixin) vue 官方介绍 混入 (mixin) 提供了一种非常灵活的方式,来分发 ...
随机推荐
- vue网络不好时不间断请求
配置默认参数 const { apiConfig: { timeout, retry, retryDelay } } = config; if(timeout) axios.defaults.time ...
- c# datatable 如何转CSV文件
public void DataTableToCSV(DataTable dtCSV, string csvFileFullName, bool writeHeader, string delimet ...
- linux下Django Nginx+uwsgi 安装配置
原文链接 在前面的章节中我们使用 python manage.py runserver 来运行服务器.这只适用测试环境中使用. 正式发布的服务,我们需要一个可以稳定而持续的服务器,比如apache, ...
- You are using the runtime-only build of Vue where the template compiler is not available.
使用vue-cli搭建的项目,启动报错 You are using the runtime-only build of Vue where the template compiler is not a ...
- 程序员和IT员不能错过的网站
前言本文收录一些值得收藏的开发相关网站. 目录一.搜索引擎二.在线课程三.在线练习四.在线工具箱五.在线编译器六.技术论坛或社区七.音乐放松一下 一.搜索引擎搜索引擎大家最熟悉不过,本没有必要列出,但 ...
- STM32L15x——ADC采集DMA数据只第一次正确(已解决)
前提:我用的芯片是STM32L系列,可能对其它STM32系列不完全适用,仅供参考! 一.问题描述 我在使用DMA方式读取单ADC单通道采集的数据时,发现只能正确的采集一次数据,后来的就一直与第一次的相 ...
- windows 8/10 彻底删除脱机文件
先关闭脱机文件选项 控制面板 > 同步中心 > 管理脱机文件 > 查看脱机文件 > 点击 计算机 > ... > 脱机同步的文件夹右键,取消同步 可能需要重启 如果 ...
- 一周死磕fastreport ----ASP.NET (一)
https://blog.csdn.net/wuyuander/article/details/52692435 原文链接,点击跳转 首先是安装好FastReport .net: 然后在vs2012中 ...
- SQLite3学习笔记(3)
SQLite 表达式 表达式是一个或多个值.运算符和计算值的 SQL函数的组合. SQL表达式与公式类似,都写在查询语言中.您还可以使用特定的数据集来查询数据库. SELECT语句的基本语法如下: S ...
- Elasticsearch:fuzzy 搜索 (模糊搜索)
在实际的搜索中,我们有时候会打错字,从而导致搜索不到.在Elasticsearch中,我们可以使用fuzziness属性来进行模糊查询,从而达到搜索有错别字的情形. match查询具有"fu ...