vue的extends和mixins， model 和v-model，provide和inject 的使用

mixins就是混入。 一个混入对象可以包含任意组件选项。 同一个生命周期，混入对象会比组件的先执行。

test.js

export const mixinsTest = {
  methods: {
    hello() {
      console.log("hello");
    }
  },
  created() {
    this.hello()
  }
}

home.vue

<template>
  <div>home</div>
</template>

<script>
import { mixinsTest } from "../components/test.js";
export default {
  name: "Home",
  data() {
    return {};
  },
  created() {
    console.log("home");
  },
  mixins: [mixinsTest],
};
</script>

mixins的created会先被调用,然后再执行组件的created

vue的extends和mixins类似，通过暴露一个extends对象到组件中使用。
extends会比mixins先执行。执行顺序：extends > mixins > 组件
extends只能暴露一个extends对象，暴露多个extends不会执行。

test.js，export暴露出多个 mixins/extends 对象

export const mixinsTests = {
  methods: {
    hello() {
      console.log('hello_mixins')
    }
  },
  beforeCreate() {
    console.log('mixins的beforeCreate')
  },
  created() {
    this.hello()
  },
}

export const mixinsTests2 = {
  methods: {
    hello2() {
      console.log('hello_mixins2')
    }
  },
  created() {
    this.hello2()
  },
}

export const extendsTets = {
  methods: {
    hello3() {
      console.log('hello_extends')
    }
  },
  beforeCreate() {
    console.log('extends的beforeCreate')
  },
  created() {
    this.hello3()
  },
}

home.vue

<template>
  <div class="home">
    home
  </div>
</template>

<script>
import { mixinsTests, mixinsTests2, extendsTets } from '../components/test.js'

export default {
  name: 'home',
  data() {
    return {
      
    }
  },
  beforeCreate() {
    console.log('home的beforeCreate')
  },
  created() {
    console.log('12111')
  },
  mixins: [mixinsTests2, mixinsTests],
  extends: extendsTets
}
</script>

model(v-model)

v-model指令的本质是：
它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理。同时，v-model会忽略所有表单元素的value、checked、selected特性的初始值，它总是将vue实例中的数据作为数据来源。
然后当输入事件发生时，实时更新vue实例中的数据。

<input
      type="text"
      @input="handleInput($event)"
      placeholder="请输入"
      v-bind:value="message"
    />
    <p>输入的内容是: {{ message }}</p>


data() {
  return {
    message: "",
  };
},
methods: {
  handleInput: function (event) {
    console.info("控制台打印event详情");
    console.info(event);
    console.info(event.toLocaleString());
    this.message = event.target.value;
  },
},

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作
prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用
model 选项可以回避这些情况产生的冲突。

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    value: String,
    checked: {
      type: Number,
      default: 0
    }
  }
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

provide和inject

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols
作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。 inject 选项应该是：
一个字符串数组，或 一个对象，对象的 key 是本地的绑定名，value 是： 在可用的注入内容中搜索用的 key，或 一个对象，该对象的： from 属性是在可用的注入内容中搜索用的 key
属性是降级情况下使用的 value

使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据

父组件

<template>
  <div class="home">
    home
    <hello-world/>
  </div>
</template>

<script>
import HelloWorld from '../components/HelloWorld'
export default {
  name: "home",
  components: {
    HelloWorld
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() {
      console.log('reload')
    }
  }
}
</script>

子组件

<template>
  <div>
    hello world
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  mounted() {
    this.reload()
  }
}
</script>

<style lang="scss" scoped>
</style>

向子孙组件使用

父组件

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

<script>
export default {
  data() {
    return {
      datas: [
        {
          id: 1,
          label: "产品一",
        },
        {
          id: 1,
          label: "产品二",
        },
        {
          id: 1,
          label: "产品三",
        },
      ],
    };
  },
  provide() {
    return {
      datas: this.datas,
    }
  }
}
</script>

子组件

<template>
  <div>
    <ul>
      <li v-for="(item, index) in datas" :key="index">
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  inject: ['datas']
}
</script>

后代元素引入被注入数据datas，并在组件内循环输出
实际上，你可以把依赖注入看作一部分“大范围有效的 prop”，
除了：祖先组件不需要知道哪些后代组件使用它提供的属性
后代组件不需要知道被注入的属性来自哪里

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临