Vue3学习笔记（9.6）

mez_Blog

已于 2023-04-07 10:39:33 修改

阅读量1k

点赞数 1

分类专栏：前端 HTML5 Vue3 文章标签：学习 vue.js 前端 html5 开发语言

于 2023-04-07 10:39:31 首次发布

本文链接：https://blog.csdn.net/mez_Blog/article/details/130005898

版权

前端同时被 3 个专栏收录

53 篇文章 0 订阅

订阅专栏

HTML5

33 篇文章 0 订阅

订阅专栏

24 篇文章 0 订阅

订阅专栏

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"对象的钩子被调用
//=>"组件钩子被调用"

mez_Blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue3学习笔记（9.6）

混入（mixins）定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin对象的钩子将在组件自身钩子之前调用。比如，数据对象在内部会进行浅合并（一层属性深度），在和组件的数据发生冲突时以组件数据优先。以下实例中，Vue实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。
复制链接

扫一扫