Vue混入
Vue 混入
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
- 数据对象合并
数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先
var mixin = {
data() {
return {
msg: 'abcd'
}
}
}
var app = new Vue({
mixins: [mixin],
el: '#app',
data: {
msg: 'ABCD'
}
})
- 钩子函数合并
同名钩子函数将混合为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
var mixin = {
data() {
return {
msg: 'abcd'
}
},
created: function () {
console.log('混入对象的钩子被调用')
}
}
var app = new Vue({
mixins: [mixin],
el: '#app',
data: {
msg: 'ABCD'
},
created: function () {
console.log('组件钩子被调用')
}
})

- methods, components 和 directives合并
methods, components 和 directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。
var mixin = {
data() {
return {
msg: 'abcd'
}
},
created: function () {
console.log('混入对象的钩子被调用')
},
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var app = new Vue({
mixins: [mixin],
el: '#app',
data: {
msg: 'ABCD'
},
created: function () {
console.log('组件钩子被调用')
},
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from app')
}
}
})

- 全局混入
一旦使用全局混入对象,将会影响到 所有 之后创建的 Vue 实例。
Vue.mixin({
created: function () {
console.log('全局混入')
}
})

Vue混入的更多相关文章
- 浅析vue混入(mixin)
vue中的混入,可以在一定程度上提高代码的复用性.通俗来说,混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”.但是与继承不同的是,继承一般都跟随着属性的重写与合并,混入在不同 ...
- vue混入 (mixin)的使用
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项. 使用示 ...
- vue 混入 mixin,自定义指令,过滤器
vue 混入 mixin ,分发 vue 组件中重复的功能 局部的书写格式 // mixin.js var mymixin = { // 这是一个对象:对象里面的写法与组件里面的写法一模一样,组件该 ...
- Vue 混入(mixins)
详细参考官方文档 基础 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. ...
- vue混入函数问题
vue开发时,遇到个问题, import mxTable from "#mixin/table"; 导入了一个混入mxTable,但是该混入函数中import了其他的js代码,此时 ...
- vue混入(mixins)
混入(mixins)是一种分发vue组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项. 当组件使用混入对象时,所以混入对象的选项将被混入该组件本身选项,当组件和混入对象含有同名选项时,这 ...
- 学习笔记:Vue——混入
前言: 到现在用Vue做了不少项目了,用到的都是初阶的功能,很多高阶能力都没有用到.仅用初级阶段也能做项目,甚至是复杂项目,可见vue之强大,果然是渐进式开发方式. 但是本着虚心学习的态度,还是要抽空 ...
- Vue混入:基础
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能. 一 App组件 <template> <div id="app"> & ...
- Vue混入:全局混入
一 项目结构 二 main.js import Vue from "vue"; import App from "./App.vue"; Vue.config. ...
随机推荐
- ERROR internal error: process exited while connecting to monitor
centos7.4 创建kvm虚拟机时报错 问题: [root@oldboy ~]# virt-install --virt-type kvm --os-type=linux --os-variant ...
- String.StartsWith 方法
startsWith() 方法用于检测字符串是否以指定的前缀开始. 语法 public boolean startsWith(String prefix, int toffset) 或 public ...
- c# 集合去重并筛选
(from context in retDataList group context by context.ResourceId into g select g.OrderByDescending(b ...
- Linux mint 下开发设置
切换thinpad Home-Pgup End-Pgdn sudo vim ~/.Xmodmap keysym Prior = Home keysym Next = End 禁用鼠标中间粘帖功能 su ...
- OO随笔
第一次作业——多项式计算 1.自我程序分析 第一次作业是多项式计算,只使用了一个多项式类.第一次接触面向对象的程序,还比较生疏,不是很能理解面向对象的思想.将读入,处理,计算,都放到了main函数中, ...
- P3958 奶酪
传送门 思路: 模拟题.用并查集求出所有 “连通块” ,判断是否有 “连通块” 的最顶上和最下方都不小于奶酪的范围. Code: #include<iostream> #include&l ...
- photoKit使用笔记
@主要用到的类 1PHAssetCollection:图片资源数组(代表着相簿数组) 作用:获取相簿资源数组 示例代码: //获取相簿资源 PHFetchResult<PHAssetCollec ...
- Python自学:第三章 弹出列表中任何位置处的元素
motorcycles = ["honda", "yamaha", "suzuki"] first_owned = motorcycles. ...
- vue中data中引用本地图片报错404
首先说明vue-cli中assets和static两个文件的区别 1.assets在项目编译的过程中会被webpack处理理解为模块依赖,如果执行npm run dev或npm run build命令 ...
- java.lang.ClassNotFoundException: org.apache.log4j.Logger 异常
Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'd ...