vue复习slot插槽和 provide 和inject 使用

总共三个组件

<template>
  <div>
    <input :type="type" :value="value" @input="myInput" v-bind="$attrs" />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
    },
    type: {
      type: String,
      default: "text",
    },
  },
  methods: {
    myInput(e) {
      // 数据发生变化的时候，我们就上层的父亲去校验数据
      this.$emit("input", e.target.value);
      this.$parent.$emit("validate", e.target.value);
    },
  },
  data() {
    return {};
  },
};
</script>

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

 

外面想v-model 使用。里面就必须实现两个逻辑

  <input :type="type" :value="value" @input="myInput" v-bind="$attrs" />

 

好，我们看下使用

这里我们可以看到，上面v-model 将数据绑定到了 KInput 组件上了，下面我就想了，form 数据如何得到的？

也就是KInputItem 如何从 KForm 组件中得到数据，这里面用到了 ， provide 和inject 我们来看下代码!