vue mixin 混入

Posted 2021-03-08 wuqilang

　通过mixins引入组件后，会给当前组件额外扩展一些属性和方法，简单的说就是给组件额外添加了一个BUFF

 

    场景：封装插件的时候用mixin

 

    mixin----全局使用

    mixins----局部使用

 

    步骤：

        ①utils下新建mixin.js：

            export default {
                // new Vue()中的配置项都可以在这里加
                data(){
                    return{
                        title:"我是额外提供的一个属性"
                    }
                },
                created() {
                    console.log("我是一个buff")
                }
            }

        ②App.vue中引入：

            import Mixin from "./utils/mixin.js";

        ③添加mixins属性：

            mixins:[Mixin],

 

        此时在created中就多一个console.log打印，在App.vue页面可以直接使用title属性，就和写在自己的data中一样。