Vue3学习笔记（9.6）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3学习笔记（9.6）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

Vue3学习笔记（9.6）

同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin对象的钩子将在组件自身钩子之前调用。文章来源地址https://www.toymoban.com/news/detail-406896.html

const myMixin={
    created(){
        console.log('mixin对象的钩子被调用')}}

const app=Vue.createApp({
    mixins:[myMinxin],
    created(){
        console.log('组件钩子被调用')}})

//=>"mixin"对象的钩子被调用
//=>"组件钩子被调用"

到了这里，关于Vue3学习笔记（9.6）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！