1.混入mixins

1.什么是mixin?

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

注意：提取的是逻辑或配置，而不是HTML代码和CSS代码。

2.mixins特点

1.方法和参数在各组件中不共享

如混入对象中有一个 cont:1的变量，在组件A中改变cont值为5，这时候在组件B中获取这个值，拿到的还是1，还是混入对象里的初始值，数据不共享。

2.值为对象的选项

如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的，比如混入对象里有个方法A，组件里也有方法A，这时候在组件里调用的话，执行的是组件里的A方法。

3.值为函数的选项

如created,mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用，同一个钩子函数里，会先执行混入对象的东西，再执行本组件的。

4.与公共组件的区别

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。 3.mixin和vuex的区别？ mixin：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

4.mixins使用

// mixin.js
export const mixin = {
    data() {
        return {
        }
    },
    created() {
    },
    methods: {
    },
}

// demo.vue
<script>
import { mixin } from './views/mixin'

export default {
  mixins: [mixin],
}
</script>

5.mixins总结

当某个组件混入了mixin文件之后生命周期函数合并后执行顺序：先执行mixin中的，接着执行组件的
当mixin中的data数据和method方法与组件中的相冲突时，优先使用组件中的
不同组件引用 mixin中data数据和method方法是相互独立的！

2.插槽Slot

在Vue中，Slot（插槽）是一种让父组件能够向子组件传递内容的方式。使用插槽，可以在父组件中定义子组件的部分内容，然后在子组件中使用插槽来展示这些内容。

// 父组件
<template>
    <div>
        <child>
            <template v-slot:header>这是来自父组件的内容</template>
            <template slot="content">这是来自父组件的内容</template>
        </child>
    </div>
</template>


// 子组件
<template>
    <div>
        <h3>子组件</h3>
        <slot name="content"></slot>
        <slot name="header"></slot>
    </div>
</template>

3.自定义指令directive

Vue的自定义指令通过Vue.directive方法来创建。

bind：指令第一次绑定到元素时调用。在这里可以执行一次性的初始化设置。
inserted：被绑定元素插入父元素时调用。注意，父元素可能还未存在，所以不能进行DOM操作。
update：被绑定元素所在的组件更新时调用，但是可能发生在其子组件更新之前。可以比较更新前后的值，执行相应的操作。
componentUpdated：被绑定元素所在的组件及其子组件全部更新后调用。可以执行操作，例如更新DOM。
unbind：指令与元素解绑时调用。可以执行清理操作。

除了上述的钩子函数外，还可以在指令对象中定义其他属性和方法：

name：指令的名称，用于在模板中绑定指令。
value：指令的绑定值，可以是一个表达式或变量。
arg：指令的参数，用于传递额外的信息。
modifiers：修饰符对象，可以用于传递额外的标记信息。
el：指令所绑定的元素。
vm：指令所属的Vue实例。
expression：指令的表达式。
context：指令所在上下文的Vue实例。

下面是一个简单的自定义指令示例：

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // 初始化设置
  },
  inserted(el, binding, vnode) {
    // 元素插入父元素时调用
  **},**
  update(el, binding, vnode) {
    // 组件更新时调用
  },
  componentUpdated(el, binding, vnode) {
    // 组件及子组件更新后调用
  },
  unbind(el, binding, vnode) {
    // 解绑时调用
  }
});

// 在模板中使用自定义指令：
<div v-my-directive="value"></div>

Q: Vue 自定义指令在什么时机执行？

A: 是在运行时解析并执行的

编译时内置指令在到 Render 时已经执行完成，然而到了运行时之后才开始自定义指令的解析工作。

4.实现父子组件双向数据绑定

父组件
<Checkbox keys="rep_form_of_bill" v-model="form.formationMode" />
子组件
<a-checkbox-group v-model="valueModel"></a-checkbox-group>

<script>
export default {
  model: {
    //需要定义哪一个props可以用v-model绑定属性
    prop: 'value',
    //声明一个事件，调用之后，就会改变父级容器的值
    event: 'handlerValueChange'
  },
  computed: {
    valueModel: {
      get: function () {
        //实际使用的是value值
        return this.value;
      },
      set: function (val) {
        //侦听到setter()事件，将值传递回父级组件
        this.$emit('handlerValueChange', val);
      }
    }
  },
  props: {
    value: { type: [Array, String, Number, Date, Boolean] },
  },
}
</script>

// 父组件
<dialog :show.sync="dialog" />
// 子组件
props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    dialog: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },

v-model 是 Vue.js 中用于实现数据双向绑定的指令。它通常与 :value 和 @input 等事件结合使用。当 v-model 被应用到某个元素时，它的 :value 属性会被用作组件的 props，而 @input 事件则用来触发相应的 methods。

然而，有时候开发者可能会遇到需要特定 props 或 events 的场景，这时候可以通过 model 选项来自定义 v-model的行为。例如，如果一个组件想要接收 value 和 input 事件的组合，而不是直接使用 :value 作为 props，可以使用 model 配置来实现这一点。

5.给class、style绑定三元运算符

:style="{'z-index': zIdex}"

6.关闭eslint检测

// vue.config.js
module.exports = {
    lintOnSave: false
}

VUE常用方法