Vue入门--第五天--mixins

Vue进阶属性

mixins-混入

简单来说就是复制

也是为了减少重复

• directives的作用是减少DOM操作的重复
• mixins的作用是减少data,methods,钩子的重复

场景：给五个组件添加name和time,在created和destroyed时打出提示，并报出存活时间。

• 方法一：给每个组件添加data和钩子，共五次
• 方法二：或者使用mixins减少重复

<template>
  <div>Child1</div>
</template>

<script>
export default {
  data(){
    return {
      name: "Child1",
      time: undefined
    };
  },
  created() {
    this.time = new Date();
    console.log(`${this.name}出生了`)
  },
  beforeDestroy(){
    const now = new Date();
    console.log(`${this.name}死亡了，共生存了${now-this.time}ms`)
  }
};
</script>

<template>
  <div id="app">
    <Child1 v-if="child1Visible">
    <button @click="child1Visible = false">x</button>
    <Child2 v-if="child2Visible">
    <button @click="child2Visible = false">x</button>
    <Child3 v-if="child3Visible">
    <button @click="child3Visible = false">x</button>
    <Child4 v-if="child4Visible">
    <button @click="child4Visible = false">x</button>
    <Child5 v-if="child5Visible">
    <button @click="child5Visible = false">x</button>
  </div>
</template>

<script>
import Child1 from "./component/Child1.vue"
import Child2 from "./component/Child2.vue"
import Child3 from "./component/Child3.vue"
import Child4 from "./component/Child4.vue"
import Child5 from "./component/Child5.vue"
export default {
  name: "APP",
  data(){
    return {
      child1Visible: true,
      child2Visible: true,
      child3Visible: true,
      child4Visible: true,
      child5Visible: true,
    };
  },
  components: {
    Child1,
    Child2,
    Child3,
    Child4,
    Child5
  }
};
</script>

在每个子组件中写上面的代码，父组件这样写，就可以实现了。
这样写就感觉不对劲，重复的太多了。
重复的部分就是在Child中，把公共的部分抽离出来。

在一个js文件中

const log = {
    data(){
      return {
        name: undefined,
        time: undefined
      };
    },
    created() {
      if(!this.name){
        throw new Error("need name");
      }
      this.time = new Date();
      console.log(`${this.name}出生了`)
    },
    beforeDestroy(){
      const now = new Date();
      console.log(`${this.name}死亡了，共生存了${now-this.time}ms`)
    };
}

export default log;

这是Child组件中写

<template>
  <div>Child1</div>
</template>

<script>
import log from "../mixins/log.js"//路径随便写的
export default {
  data(){
    return {
      name: "Child1"
    };
  },
  mixins: [log]//把log里面的选项复制到我这里
};
</script>

mixins: [log]把log里面的选项复制到我这里

几个Child都要调用这个log，所以name不能写死，在每个子组件中的data中自己写name就可以了

当Child中有created时，会合并，都会执行

使用了mixins就减少data,methods,钩子的重复

Vue-extends

和mixins一样也是重复
extends也是一个构造选项

接上篇博客的log文件
MyVue.js这样写

import Vue from "vue";
import log from"./mixins/log.js";
const MyVue = Vue.extend({
  mixins: [log]
});

export default MyVue;

Child组件这样使用extends

<template>
  <div>Child</div>
</template>

<script>
import MyVue from"../MyVue.js"
export default {
  extends: MyVue,
  data() {
    return {
      name: "Child1"
    };
  }
};
</script>

其实直接用mixins就好了，有点绕。。。