[Vue] 28.混入与自定义指令：Mixin混入的基础语法（1）

最新推荐文章于 2022-11-24 10:44:54 发布

weiweicn!

最新推荐文章于 2022-11-24 10:44:54 发布

阅读量214

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/u014627255/article/details/125584294

版权

Vue 专栏收录该内容

38 篇文章

订阅专栏

一、如何写混入

定义一个混入对象：

const myMixin = {
            data() {
                return {number: 2}
            }
        }

将定义好的混入混到组件中

mixins: [myMixin],

如果组件中没有定义数据，会使用混入进来的数据，若有相同数据，则会使用组件自己定义的数据（methods中的内容一样）
生命周期函数也可以通过混入的形式混到组件中

const myMixin = {
            data() {
                return {
                    number: 2,
                    count: 222
                }
            },
            created() {
                console.log('mixin created')
            }
        }

注：组件中的生命周期函数不会覆盖掉混入中的生命周期函数，两者都会执行，先执行mixin中的，再执行组件中的

完整代码如下：

<!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>28</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // mixin混入
        // 组件data, methods优先级高于mixin data优先级
        // 生命周期函数，先执行mixin中的，再执行组件中的
        const myMixin = {
            data() {
                return {
                    number: 2,
                    count: 222
                }
            },
            created() {
                console.log('mixin created')
            },
            methods: {
                handleClick() {
                    console.log('mixin handleClick')
                }
            }
        }
        const app = Vue.createApp({
            data() {
                return {
                    number: 1,
                }
            },
            created() {
                console.log('created')
            },
            mixins: [myMixin],
            methods: {
                handleClick() {
                    console.log('handleClick')
                }
            },
            template: `
            <div>
                <div>{{number}}</div>
                <div>{{count}}</div>
                <button @click="handleClick">增加</button>
            </div>
            `
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>