vue-mixin

1.vue中,混入(mixin)是一种特殊的使用方式。一个混入对象可以包含任意的组件配置选项(data, props, components, watch,computed…)可以根据需求"封装"一些可复用的单元,并在使用时根据一定的策略合并到组件的选项中,使用时和组件自身的选项没有区别.

2.mixin中比较重要的两个方法: Vue.extend() 和 extend()

3.Vue.extend(): 是基础的Vue构造器,参数是一个包含组件选项的对象(组件选项包括data, props, computed, methods等等), 可以显示的扩展组件和混入对象

4.全局混入将对所有的Vue实例均有效,不推荐使用,但是在编写一些Vue插件的时候会用到,例如Vuex的源码中就使用了全局的mixin全局混入$store对象

案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js">script>
head>
<body>
    <div id="root">
        <child>child>
    div>
body>
<script>
   // 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var child = Vue.extend({
  template:'
'
, mixins: [myMixin] }) let app = new Vue({ el:"#root", components:{ child } })
script> html>

vue-mixin_第1张图片
4.extend(): 是对象的合并方法,参数是合并的源对象和目标对象,用于对象的合并,用法为: extend(target, source)表示source对象将合并到target对象上,作用类似Object.assign()方法
(当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。)

案例

<script>
   // 定义一个混入对象
   var myMixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

// 定义一个使用混入对象的组件
new Vue({
  el:'#root',
  mixins: [myMixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})
script>

(同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。)

你可能感兴趣的:(vue.js,javascript,前端)