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. ...
随机推荐
- 算法(第四版)C# 习题题解——2.1
写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 这一节内容可能会用到的库文件有 ...
- C#线程同步(5)- 信号量 Semaphore
文章原始出处 http://xxinside.blogbus.com/logs/47617134.html 预备知识:C#线程同步(1)- 临界区&Lock,C#线程同步(2)- 临界区&am ...
- openwrt如何关掉防火墙?
答: 1. 阻止防火墙服务开机自动启动 /etc/init.d/firewall disable 2. 关闭防火墙 /etc/init.d/firewall stop
- Arthas:线上问题排查工具
安装 下载 java -jar arthas-boot.jar 查看版本: D:\Program Files\arthas $ java -jar arthas-boot.jar -version [ ...
- 【HNOI 2018】转盘
Problem Description 一次小 \(G\) 和小 \(H\) 原本准备去聚餐,但由于太麻烦了于是题面简化如下: 一个转盘上有摆成一圈的 \(n\) 个物品(编号 \(1\) 至 \(n ...
- UI组件--element-ui--Table组件自定义合计行
需求: Element-ui的Table组件自带合计行, 但是需求需要在合计行的某些单元格有特别的样式以及事件, 没有研究出怎么在既有合计行上完成此需求, 于是利用其原本的一些属性完成自定义合计行. ...
- HttpClient MultipartEntityBuilder 上传文件
文章转载自: http://blog.csdn.net/yan8024/article/details/46531901 http://www.51testing.com/html/56/n-3707 ...
- 【原】git常见用法
1.克隆 当前用户:git clone 192.165.53.15:/home/git/repo/Tegra/bsp/tx1_filesystem.git/ 非当前用户:git clone xxxxx ...
- 如何为Rails作贡献:例增加rich_text field generators
如何为Rails作贡献 例增加rich_text field generators 下载https://github.com/rails/rails 打开atom,在 rails/railties/l ...
- 用python算圆周率及进度条提示
(一)圆周率 : (1)圆周率是指平面上圆的周长与直径之比 (ratio of the circumference of a circle to the diameter) .用符号π表示.中国古代有 ...