Vue2.x 中实现父子组件间的双向绑定

Vue2.x 中父子组件中 props 的属性不能在子组件中改变其值然后传出至父组件了,但是有的时候也会存在一些麻烦,比如我们想要实现一些自定义组件,总是会有值的传入传出改变的,比如我希望做一个 popup,那么肯定需要根据父节点的状态来确定子节点。

尽管官方推荐双向数据流,但还是有一些方法避免报错,实现或 hack 双向数据流:

Event Bus / Vuex

最简单的当然是通过状态管理来管理我们的变量,但对于数据流不复杂的父子节点交互而言,未免太过浪费,因此通常我们不会特别的去考虑它,尤其是 popup / checkbox 这种基础组件的时候。

使用 Object

Object 的值是其内存地址,只改变 Object 内部的值不改变地址将不会出现报错。

使用 Event-Emit 处理

尽管不可以直接修改值,但是通过 event emit,我们在子组件改变其值时(可以通过 watch,事件监听等方法监听,在子组件中用 this.$emit('eventName', value) 传入,在父组件中绑定 @event-name,在函数中修改值。但是这样如果是 input 基础组件,写函数就得写到疯——不靠谱。

v-model

所幸我们还有一个叫做 v-model 的语法糖:v-model 相当于给子组件一个名为 valueprop,再接受子组件 input 事件并赋值给父组件的对应变量。

所以我们需要做以下几件事情:

  1. 子组件定义名为 valueprop
  2. 在需要改变父组件值时发送 input 事件。

但是在子组件内我们要先变动一个作用域为子组件的值,才能使用监听,所以我们绑定一个 _value,之后在父组件就能使用 v-model 了。:

computed: {
 _value: {
   get() {
     return this.value;
   },
   set(val) {
     this.$emit('input', val);
     this.$emit('change', val);
   }
 }

一个完整的基础组件代码:

<template>
  <label class="radio">    
    <input type="radio" :name="name" v-model="_value" :value="label" :disabled="disabled">
    <div>{{ text }}</div>
  </label>
</template>

<style lang="scss" scoped>
  .radio {
    display: block;
    height: 50px;
    margin-bottom: 10px;
    input[type=radio] {
      display: none;
    }
    div {
      position: relative;
      line-height: 30px;
      top: -10px;
      right: 20px;
    }
    div:after {
      position: relative;
      right: -20px;
      top: 10px;
      transition: .1s;
    }
    input[type=radio] + div:after {
      content: '';
      display: inline-block;
      border: 1px solid #b3bbc2;
      height: 30px;
      width: 30px;
      border-radius: 50%;
    }
    input[type=radio]:checked + div:after {
      border: 10px solid #7ebcff;
      height: 30px;
      width: 30px;
    }
  }
</style>

<script>
  export default {
    name: 'CustomRadio',
    props: {
      value: {
        type: [ Boolean, String, Number ]
      },
      text: {
        type: String,
        required: false
      },
      name: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      label: {
        type: [ Boolean, String, Number ],
        required: false
      }
    },
    computed: {
      _value: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('input', val);
          this.$emit('change', val);
        }
      }
    }
  };
</script>

植入部分

如果您觉得文章不错,可以通过赞助支持我。

如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 源码, 知识, 代码段, 语法, Vue

已有 2 条评论

  1. Eridanus Sora

    学习了,v-model这种还真不知道。。

  2. 鱼米团子

    妙啊!

添加新评论