Vue混合机制mixins使用

目录

1.和正常父子组件引用区别

2.mixins使用

---

1.和正常父子组件引用区别

父子组件引用：(是相互独立的, 通过props传值调用)

          父组件 + 子组件  ==> 父组件 + 子组件

mixins：(集合成一个新的组件，在同一个作用域内，直接使用)

          父组件 + 子组件 ==> new父组件

2.mixins使用

1. 写一个mixins文件，mixins/common.js。暴露出对象结构

export default {
    methods: {
        testMixins(str) {
            console.log(str)
        }
    }
}

2. 写一个page页面，test.vue页面

<template>
  <div @click="testMixins('哈哈哈')">test</div>
</template>
<script>
import newMixins from '@/mixins/common.js'
export default {
    mixins: [newMixins], //注入mixins, 上面点击使用
    props: {},
    data() {},
    methods: {}
}
</script>