自己实现一个 v-model

核心封装：

<!-- 下面两个表达 实现同样的效果 -->
<input v-model='val'>
<input :value='val' @input="val = e.target.value" />

v-model 默认情况下只会接受 value 属性和响应 input 事件。 因为 v-model 本身是基于 input 输入框定制的， value 是 input 内部定制的绑定值的属性， input 方法是输入框值改变触发的事件。

自己实现代码：

model 接受有两个属性：(相当于重命名)

• props 代替原来 val 的值。
• event 代替原本 input 出发的事件

父组件：

<template>
  <div>
    <div>值：{{ name }}</div>
    <Input v-model="name" />
    <!-- 相当于 -->
    <!-- <Input :value="name" @input="name = e.target.value" /> -->
  </div>
</template>
<script>
import Input from './Input.vue'
export default {
  components: {
    Input
  },
  data () {
    return {
      name: ''
    }
  }
}
</script>
<style scoped>
</style>

封装v-model组件：

<template>
  <div>
    <!-- value绑定父组件传过来的值 -->
    <input type="text" :value="inputValue" @input="change" />
  </div>
</template>
<script>
export default {
  props: {
    inputValue: String // props接受传过来的inputValue
  },
  model: {
    prop: 'inputValue', // 把父组件传过来的值重命名为value，input 绑定的value值
    event: 'changeValue' // 把父组件传过来的方法重命名为changeValue 其实就是 input
  },
  methods: {
    change (e) {
      this.$emit('changeValue', e.target.value)
    }
  }
}
</script>
<style lang="scss">
</style>

即实现双向绑定~

例子：使用v-model模拟一个显示与否的弹窗

父组件：

<template>
  <div>
    <el-button @click="openDialog">打开弹窗</el-button>
    <el-button @click="closeDialog">关闭弹窗</el-button>
    <Dialog v-model="show" />
  </div>
</template>
<script>
import Dialog from './Dialog.vue'
export default {
  components: {
    Dialog
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    openDialog () {
      this.show = true
    },
    closeDialog () {
      this.show = false
    }
  }
}
</script>
<style scoped>
</style>

子组件：

<template>
  <div v-if="isShow">
    <div>我是弹窗</div>
  </div>
</template>
<script>
export default {
  props: {
    isShow: Boolean
  },
  model: {
    prop: 'isShow',
    event: 'changeStatus'
  }
}
</script>
<style lang="scss">
</style>