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

最新推荐文章于 2024-06-05 10:32:32 发布

weiweicn!

最新推荐文章于 2024-06-05 10:32:32 发布

阅读量166

点赞数

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

本文链接：https://blog.csdn.net/u014627255/article/details/125584837

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

混入的数据无法在子组件中直接使用，如下：获取不到child中的count

<!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混入
        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>
               <child />
                <button @click="handleClick">增加</button>
            </div>
            `
        });
        app.component('child', {
            template: "<div>{{count}}</div>"
        })
        const vm = app.mount('#root')
    </script> 
</body>
</html>

在这里插入图片描述
2. 如果子组件中想用mixin中的数据，要引入mixins，如下：

app.component('child', {
            mixins: [myMixin],
            template: "<div>{{count}}</div>"
        })

定义全局mixin: 默认会注入到每个组件中，就不用在每个组件中引入（一般不推荐使用全局mixin，维护性不高）

app.mixin({
            data() {
                return {
                    number: 2,
                    count: 222
                }
            },
            created() {
                console.log('mixin created')
            },
            methods: {
                handleClick() {
                    console.log('mixin handleClick')
                }
            }
        }
        )

对于自定义属性，组件中的自定义属性优先级高于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混入
        const myMixin = {
            number: 1
        }
        const app = Vue.createApp({
            mixins: [myMixin],
            number: 2,
            template: `
            <div>
                <div>{{this.$option.number}}</div>
            </div>
            `
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>

在这里插入图片描述
如果想修改自定义属性的优先级：

app.config.optionMergeStrategies.number = (mixinVal, appValue) => {
            return mixinVal || appValue;
        }

如上表示，如果自定义属性有混入值，则优先返回混入的，没有则返回app中定义的
在这里插入图片描述
完整代码如下：

<!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属性的优先级
        const myMixin = {
            number: 1
        }
        const app = Vue.createApp({
            mixins: [myMixin],
            number: 2,
            template: `
            <div>
                <div>{{this.$options.number}}</div>
            </div>
            `
        });
        app.config.optionMergeStrategies.number = (mixinVal, appValue) => {
            return mixinVal || appValue;
        }
        const vm = app.mount('#root')
    </script> 
</body>
</html>