vue 代码解析

Question

以下代码原文链接：https://juejin.im/post/5bd97e...
已知：当父组件要传值给子组件时会用到prop，但是下面的代码用的v-model看不懂~~
子组件的showeventclose都怎么来的？？

<template>
  <div class="hello">
    <button @click="show=true">打开model</button>
    <demo v-model="show"></demo>
  </div>
</template>

<script>
import Demo from "./components/Demo.vue";
export default {
  name: "hello",
  components: {
    Demo
  },
  data() {
    return {
      show: false
    };
  }
};
</script>

<template>
  <div v-show="show">
    <div>
      <p>这是一个Model框</p>
      <input type="text" v-model="value" />
      {{value}}
      <button @click="closeModel">关闭model</button>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: "show",
    event: "close"
  },
  props: ["show"],
  data() {
    return {
      value: 10
    };
  },
  methods: {
    closeModel() {
      this.$emit("close", false);
    }
  }
};
</script>

Answer 1

你写错了，this.$emit('input',false)

v-model 你看你认为只有 input上面可以使用， 但是针对自定义组件， v-model, 组件内 预留了 value,不需要再props里面写，就能直接使用，并且他得到的值就是组件外 v-model传入的， v-model双向绑定，既然知道了value父->子， 那么子->父， input是预留的，this.$emit('input',false)，这样v-model的双向绑定就被 value和input组合完成了，这都是VUE预留的，目的就是让使用者能自定义v-model的实现

你所看链接有说明：
定制组件，我们就可以重写v-model里的Props 和 event，默认情况下，一个组件的 v-model 会使用 value 属性和 input 事件，往往有些时候，value 值被占用了，或者表单的和自定议v-model的$emit('input')事件发生冲突，为了避免这种冲突，可以定制组件 v-model，冲突示例。

如果你写的this.$emit('close',false) ,外面的v-model是不能接收到show的值的，需要用@close事件去接收

Answer 2

官方文档，自定义组件看一下