zoukankan      html  css  js  c++  java
  • [转]vue 中 mixins 的使用

    mixins(混入)就是定义了一部分公共的方法、计算属性或者钩子函数等 vue 组件中的可复用功能,然后混合进各个组件中使用。下面我们具体来看看怎么使用。

    创建一个 demo.js 文件,然后 export 给外部使用

    export const demoMixins = {
        data() {
            return {
                name: '我是 mixins 中的字符串 name',
                user: '我是 mixins 中的字符串 user'
            }
        },
        created() {
            console.log('我是 mixins 中的钩子函数 created')
            this.hello()
            this.say()
            this.pay()
        },
        methods: {
            hello() {
                console.log('我是 mixins 中的函数 hello')
            },
            say() {
                console.log('我是 mixins 中的函数 say')
            }
        }
    }

    在组件中引入这个 mixins 对象

    <template>
        <div></div>
    </template>
    
    <script>
    import { demoMixins } from '@/mixins/demo'
    export default {
        mixins: [demoMixins],
        data() {
            return {
                name: '我是组件中的字符串 name',
                sex: '我是组件中的字符串 sex'
            }
        },
        created() {
            console.log('我是组件中的钩子函数 created')
            this.hello()
            this.say()
            this.pay()
        },
        methods: {
            hello() {
                console.log('我是组件中的函数 hello')
            },
            pay() {
                console.log('我是组件中的函数 pay')
            }
        }
    }
    </script>

    我们先来看看执行结果

    // => 我是 mixins 中的钩子函数 created
    // => 我是组件中的函数 hello
    // => 我是 mixins 中的函数 say
    // => 我是组件中的函数 pay
    // => 我是组件中的钩子函数 created
    // => 我是组件中的函数 hello
    // => 我是 mixins 中的函数 say
    // => 我是组件中的函数 pay

    总结

    • 混入对象的钩子将在组件自身钩子之前调用。
    • 值为对象的选项,例如 datamethodscomponentsdirectives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
    • 混入对象中可以使用和调用组件自身变量和函数,且与在组件自身中使用情况一样。
    思考:一个组件是否可以同时引入多个 mixins?如果可以,执行结果和顺序又会是怎样的?大家有兴趣可以自己动手试试看。
  • 相关阅读:
    当我有一台服务器时我做了什么
    git 安装及基本配置
    关于大厂面试中问到的二十几个 HTTP 面试题
    日问周刊 | 全栈面试汇总 | 第七期
    dockerfile 最佳实践及示例
    面试官:如果 http 响应头中 ETag 值改变了,是否意味着文件内容一定已经更改
    Nginx 反向代理时获取用户的真实 IP
    Go 语言实现 HTTP 层面的反向代理
    Go 语言中的 Http 路由基础
    Json Schema
  • 原文地址:https://www.cnblogs.com/dirgo/p/14989481.html
Copyright © 2011-2022 走看看