mixin 和 mixins 区别

混入

我们写一些相似度很高的组件是，经常会发现很多能够提取出来公共使用的部分，Vue对于这部分内容，提供了一个混入的工具，mixin，mixin对象，其实也就是普通vue对象而已

全局混入

全局混入:将混入的对象注册到vue实例中.谨慎使用全局混入!

Vue.mixin({
    beforeCreate() {
        // ...逻辑
        // 这种方式会影响到每个组件的 beforeCreate 钩子函数
    }
})

局部混入Mixins

局部混入:即只有引用了mixin的组件才能够使用. 来看一个简单的例子. (注:mixin里面的代码不变,后面改变的是page1、page2的代码)

//mixin.js
export  const  myMixin={
    data(){
        return {
            isShow:false,
            content:'这是mixin的content!'
        }
    },
    methods:{
        setContent(val){
            this.data.content= val;
        }
    },
    mounted(){
        console.log('这是混入的mounted!');
    }
}

分别在页面一、页面二引入mixin

//page1.vue page2类似
import {myMixin} from '@/mixins/mixin.js'
export default {
  name:"Page1",
  mixins:[myMixin],
}

1. 当组件的数据和mixin的数据冲突的时候,以组件内部的数据为主.
2. 如果mixin和组件内部有相同的钩子函数.则这两个钩子函数会合并成一个数组,并且mixin对象的钩子函数先调用,组件内部的后调用.
3. 如果混入对象和组件内部的methods、components、directives冲突时,以组件内部的为准.

实例

现在有一个需求:在不同页面根据不同的内容显示不同的提示框.这里我们使用混入来解决.

mixin.js

//mixin.js
export  const  myMixin={
    data(){
        return {
            content:''
        }
    },
    methods:{
        setContent(val){
            this.content= val;
        },
    }
}

page1.vue

//page1.vue
<template>
  <div>
    <h1>这是页面一!</h1>
    <div
      class="alert alert-warning alert-dismissible fade show"
      role="alert"
      style="width: 300px; margin: 0 auto"
    >
      <strong>{{ content }}</strong> 请进行其他操作!.
      <button
        type="button"
        class="close"
        data-dismiss="alert"
        aria-label="Close"
      >
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</template>

<script>
import { myMixin } from "@/mixins/mixin.js";
export default {
  name: "Page1",
  mixins: [myMixin],
  mounted() {
    this.setContent("页面一修改成功!");
  },
};
</script>

page2.vue

<template>
  <div>
    <h1>这是页面二!</h1>
    <div class="alert alert-warning alert-dismissible fade show" role="alert" style="width: 300px;margin: 0 auto;">
      <strong>{{content}}</strong>请进行其他操作!.
      <button
        type="button"
        class="close"
        data-dismiss="alert"
        aria-label="Close"
      >
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</template>

<script>
import { myMixin } from "@/mixins/mixin.js";
export default {
  name: "Page2",
  mixins: [myMixin],
  mounted() {
    this.setContent("页面二删除成功!");
  },
};
</script>

转载地址

blog.csdn.net/qq_38870665…