知食记
搜索文档…
知食记
思维导图
归档
博客
🎃CSS
CSS基础
CSS3
SCSS
🎉JavaScript
JS 概念
JS陷阱
JS开发知识点
实现JS常见函数
实现JS 常见操作函数
JS Worker
ES6
ES6 函数
Typescript
V8
🕹️框架
Vue
基础知识
长列表性能优化
mixin
渲染函数
组件间通信
vue中的柯里化闭包
vue 渲染过程
Vue采用虚拟DOM的目的是什么
keep-alive
nextTick
vue 数组变异
vue-computed原理
vue-router原理
vue-router权限控制
路由懒加载
Vue diff原理
computed如何与视图绑定
scope css
Runtime Only vs Runtime + Compiler
集中变量管理
Vue3
React
React-Redux
React Hooks
Nuxt
Koa2
🎯算法
算法与数据结构
🎁HTML
DOM
SVG
🏈计算机网络
浏览器
计算机网络
🥊前端生态
Webpack
Babel
Fetch
Axios
Npm
Yarn
业务开发
微前端
Hexo
🏀后端
Node
Java
Python
🕹️面试
面试真经
To-do
🤖开源
开源项目
🧸其他
Linux
Git
正则
设计模式
计算机理论
Group 1
由
GitBook
提供支持
mixin
混入
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。
组件混入
1
// 定义一个混入对象
2
var
myMixin
=
{
3
created
:
function
()
{
4
this
.
hello
()
5
},
6
methods
:
{
7
hello
:
function
()
{
8
console
.
log
(
'hello from mixin!'
)
9
}
10
}
11
}
12
13
// 定义一个使用混入对象的组件
14
var
Component
=
Vue
.
extend
({
15
mixins
:
[
myMixin
]
16
})
17
18
var
component
=
new
Component
()
// => "hello from mixin!"
Copied!
全局混入
1
// 为自定义的选项 'myOption' 注入一个处理器。
2
Vue
.
mixin
({
3
created
:
function
()
{
4
var
myOption
=
this
.
$options
.
myOption
5
if
(
myOption
)
{
6
console
.
log
(
myOption
)
7
}
8
}
9
})
10
11
new
Vue
({
12
myOption
:
'hello!'
13
})
14
// => "hello!"
Copied!
合并策略
当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
同名钩子函数(created, mounted, desctroyed) 将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子
之前
调用。
值为对象的选项,例如
methods
、
components
和
directives
,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
以前
长列表性能优化
下一个
渲染函数
最近更新
2yr ago
复制链接
内容
组件混入
全局混入
合并策略