Vue3混入
混入(mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-04-07 10:13:52
* @LastEditors: Mei
* @LastEditTime: 2023-04-07 10:21:08
* @FilePath: \vscode\Vue_mix.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
//定义混入对象
const myMixin={
created(){
this.hello()
},
methods:{
hello(){
document.write('这是一个混入实例')
}
}
}
//定义一个应用,使用混入
const app=Vue.createApp({
mixins:[myMixin]
})
app.mount('#app')
</script>
</body>
</html>
选项合并
当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。
比如,数据对象在内部会进行浅合并(一层属性深度),在和组件的数据发生冲突时以组件数据优先。
以下实例中,Vue实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-04-07 10:13:52
* @LastEditors: Mei
* @LastEditTime: 2023-04-07 10:29:56
* @FilePath: \vscode\Vue_mix.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
//定义混入对象
const myMixin={
data(){
return{
message:"Vue",
foo:"Hello world!",
test1:"mez"
}
}
// created(){
// this.hello()
// },
// methods:{
// hello(){
// document.write('这是一个混入实例')
// }
// }
}
//定义一个应用,使用混入
const app=Vue.createApp({
mixins:[myMixin],
data(){
return{
message:"New Word",
bar:"IKun"
}
},
created(){
document.write(JSON.stringify(this.$data))
}
})
app.mount('#app')
</script>
</body>
</html>
同名钩子函数将合并为一个数组,因此都将被调用。另外,mixin对象的钩子将在组件自身钩子之前调用。
const myMixin={
created(){
console.log('mixin对象的钩子被调用')}}
const app=Vue.createApp({
mixins:[myMinxin],
created(){
console.log('组件钩子被调用')}})
//=>"mixin"对象的钩子被调用
//=>"组件钩子被调用"