首页手记 vue父子组件状态同步的最佳方式续章(v-model篇)

vue父子组件状态同步的最佳方式续章(v-model篇)

标签：

Vue.js

大家好！我是木瓜太香！一名前端工程师，之前写过一篇《vue父子组件状态同步的最佳方式》，这篇文章描述了大多数情况下的父子组件同步的最佳方式，也是被开源中国官方推荐了，在这里表示感谢！

这次作为续章是对上一篇文章的特殊情况的补充，并会给出较详细的描述与代码演示，当然如果你单看这篇文章来解决特定问题也是可行的。

对于父子组件状态同步，这篇文章《vue父子组件状态同步的最佳方式》讲述了大多数情况下的最优解，但是当我们希望自己创建的可复用组件和封装的逻辑能够尽量行为一致的时候情况可能会有所不同，举个例子，我们现在要封装一个输入框组件叫做 MyInput 我们知道普通的输入框通常会使用 v-model 来做双向数据绑定，这里如果想让封装的 MyInput 组件在使用上与普通的输入框是一致的，我们就难免要让自定义组件也支持 v-model 指令，这之中其实本质上也会涉及到父子组件的状态同步问题，使用我们之前讲的方式也能基本实现，只是借助 vue 暴露出来的 api 可以让我们写法更优雅，接下来我们使用不同的方式来实现这个组件。

原来的实现方式

自定义的MyInput组件

<template>
  <div class="myInput">
      <!-- 这里只能用 vModel 不可以使用横杠写法 -->
    <input type="text" :value="vModel" @input="inputHandle">
  </div>
</template>

<script>
export default {
  name: "MyInput",
  props: {
      // 这里也可以写成 'v-model': String 但是建议根据风格来，如果左边都没有引号就直接驼峰
    vModel: String
  },
  methods: {
    inputHandle (event) {
        // 注意：这里使用 update:v-model 或 update:vModel 都可以
      this.$emit("update:v-model", event.target.value)
    }
  }

}
</script>

使用方式

// 方式一
<my-input :v-model="text" @update:v-model="text = $event"></my-input>
// 方式二
<my-input :v-model.sync="text"></my-input>

可以看到，原来的方式也能实现，但是就使用来说v-model被当成属性，一定要在前面加上:才可以用动态属性，结果就变成了:v-model，然后我们为了简化写法去掉事件绑定，我们最终的效果就是 :v-model.sync这种写法总会让人觉得怪怪的，接下来我们就来解决这个问题

vue-api的方式实现

自定义的MyInput组件

<template>
  <div class="myInput">
    <input type="text" :value="value" @input="inputHandle">
  </div>
</template>

<script>
export default {
  name: "MyInput",
  props: {
    value: String
  },
  methods: {
    inputHandle (event) {
      this.$emit("input", event.target.value)
    }
  }

}
</script>

使用方式

<my-input v-model="text"></my-input>

看到这里可能一部分同学会一脸懵逼，这就同步了？emm，其实还真同步了，那 value 从哪儿来的，input 事件也没绑定啊，的确这些都被我们省略掉了，其实这是 vue 的 api 带给我们的便利，在我们试图向自定义组件传入 v-model 这个特殊的属性的时候，vue 会帮我们做两件事，一件是将 v-model 中的值作为 value 的值向下传递，这是我们在内部要写 props value 的原因，另一件是在当前自定义组件上监听 input 事件，并在触发改事件的时候，将第一个参数赋值给 v-model 中的变量。你可以看到在我们肉眼不可见的地方 vue 为我们做了很多实际，但是大家要明白他为什么给你做这么多，仔细想想不难看出，这些逻辑是业务场景中重复次数很多的逻辑， vue 不给你做，你自己也要做，还会闲麻烦！当然这还没结束呢！下面更精彩！

为属性 `value` 和事件 `input` 命名

有些时候我们可能希望 value 就作为一个普通的属性往下传，而我们的业务场景里面 input 作为事件也不够形象，反正就是 value 和 input 不符合你的业务中的语义，这个时候我想改名，咋办？接下来看下面的代码:

<template>
  <div class="myInput">
    <input type="text" :value="text" @input="inputHandle">
  </div>
</template>

<script>
export default {
  name: "MyInput",
  model: {
    prop: "text", // 该属性名
    event: "update:v-model" // 改事件名
  }
  props: {
    text: String // 即便改名了，这里也必不可少
  },
  methods: {
    inputHandle (event) {
      this.$emit("update:v-model", event.target.value)
    }
  }

}
</script>

上面就展示了我们怎么更名，其实就是改变了 props 中的接受的字段名，然后新增了 model 选项，这里需要注意的是，不管怎么样 props 中的字段都必不可少。

实际应用：父子组件状态同步

如标题所说，这个 api 依然可以用作一些特殊情况下的父子组件状态同步，这里举一个实际的列子，假设我们使用某框架，这个框架提供给我们模态框组件名叫 Modal 这个组件需要添加 v-model 属性来显示隐藏模态框，通常我们的模态框会有很多的逻辑，这个时候我们会考虑将其封装成一个自定义的组件，这个时候我们希望封装过得组件和原来的模态框组件具备相同的使用方式都是加 v-model 来显示隐藏，这是时候我们讲到的功能是不是就特别合适了呢？