Vue 混入(mixins)
2024-09-14 02:32:33
基础
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
选项合并
当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。
比如,数据对象在内部会进行递归合并,在和组件的数据发生冲突时以组件数据优先。
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
同名钩子函数将混合为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
值为对象的选项,例如 methods
, components
和 directives
,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。
最新文章
- CentOS 7.2 yum方式安装MySQL 5.7
- js 限制input输入字节长度
- Iconfont矢量图标平台全面升级
- iOS开发之静态库(六)—— 时空之争
- HDU 5950:Recursive sequence(矩阵快速幂)
- litepal的jar包
- Java中介者设计模式
- 【44】将与参数无关的代码抽离templates
- Cannot generate SSPI context---MS SQL ERROR
- win7下:MySQL-Front的下载与安装
- Quartz.net 定时计划使用
- Java中参数传递问题
- 在HTML页面中加载js文件和css文件的方法
- (python走过的坑)OpenCV中错误opencv-3.3.1\modules\highgui\src\window.cpp:339: error: (-215) size.width>;0 &;&; size.height>;0 in function cv::imshow
- scan函数用法详解
- pig中查询top k,返回每个hour和ad_network_id下最大两个记录(SUBSTRING,order,COUNT_STAR,limit)
- Hierarchical clustering:利用层次聚类算法来把100张图片自动分成红绿蓝三种色调—Jaosn niu
- 【笔记】.NET开发环境下使用PostgreSQL+Oracle_fdw 实现两个数据库之间数据交互操作(二)
- bootstrap-table 分页
- Git学习系列之Windows上安装Git详细步骤(图文详解)
热门文章
- Mac下eclipse 启动时出现An error has occurred. See the log file的问题
- NetLink通信机制学习
- SpringMVC源码解析 - HandlerAdater - ModelAndViewContainer上下文容器
- BTrace追踪Hadoop部署
- 咏南中间件更新日志--将数据库配置独立成DBCONFIG.EXE
- ffmpeg学习(三)——ffmpeg+SDL2 实现简单播放器
- Spring中ApplicationContext和beanfactory区别---解析二
- ES6——Class 的基本使用
- ES6学习之const声明常量的学习
- iOS 禁止多按钮同时响应